Question

163

How to make an infinite loop with delay in JavaScript?

rated 0 times [ 167] [ 4] / answers: 1 / hits: 12902 / 10 Years ago, sun, october 19, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 10 Years ago carlton · Accepted Answer

Single element

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);

Multiple elements

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);

Working example

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>