Menu
I'm trying to make div which could change it color. Here is my code:
window.onload = function () {
for (;;){
setTimeout(function () {
document.querySelector('style').style.backgroundColor = colors[rand(colors.length)];
}, 2000);
}
}
var colors = [
'red',
'green',
'blue',
'yellow',
'magenta',
'pink'
];
var rand = function (max) {
return Math.floor(Math.random() * max);
};.style{
background-color: pink;
top: 50px;
left: 50px;
height: 50px;
width: 50px;
}<body>
<div class="style"></div>
</body>But I can't find out why it doesn't work.
EDIT: the script also crashes the browser
290
Assuming that your markup is this:
<body>
<div id="my-id"></div>
</body>
To create a "color loop" you'll have to use setInterva() to set a function that will be executed infinite times (with a defined interval) to change the color. Here is the correct code:
var cur_color = -1,
colors = [
'red',
'green',
'blue',
'yellow',
'magenta',
'pink'
];
var myInterval = setInterval(function() {
document.getElementById('my-id').style.backgroundColor = colors[(++cur_color) % colors.length];
}, 2000);
This will change the color every 2 seconds. If you want to stop it, you can use the clearInterval() function:
clearInterval(myInterval);
Assuming your markup is:
<body>
<div class="my-class"></div>
<div class="my-class"></div>
<div class="my-class"></div>
</body>
You can use the getElementsByClassName() method instead:
var myInterval = setInterval(function() {
var elements = document.getElementsByClassName('my-class');
++cur_color;
for (var i=0; i<elements.length; i++) elements[i].style.backgroundColor = colors[cur_color % colors.length];
}, 2000);
Here's a working example with multiple elements:
var cur_color = -1,
colors = [
'red',
'green',
'blue',
'yellow',
'magenta',
'pink'
];
var myInterval = setInterval(function () {
var elements = document.getElementsByClassName('my-class');
++cur_color;
for (var i = 0; i < elements.length; i++) elements[i].style.backgroundColor = colors[cur_color % colors.length];
}, 2000);.my-class {
background-color: pink;
top: 50px;
left: 50px;
height: 50px;
width: 50px;
margin: 10px;
}<body>
<div class="my-class"></div>
<div class="my-class"></div>
<div class="my-class"></div>
<body>You need setInterval function.
Also, instead of style, you need .style selector (the class selector). If you are using jquery, you may use $(".style") instead of document.querySelector(...):
window.onload = function() {
setInterval(function() {
document.querySelector('.style').style.backgroundColor = colors[rand(colors.length)];
//$('.style').css("backgroundColor", colors[rand(colors.length)]);
}, 2000);
}
var colors = [
'red',
'green',
'blue',
'yellow',
'magenta',
'pink'
];
var rand = function(max) {
return Math.floor(Math.random() * max);
};.style {
background-color: pink;
top: 50px;
left: 50px;
height: 50px;
width: 50px;
}<body>
<div class="style"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
