I've been trying to e up with the most concise way that I can possibly change background colors using JavaScript. (Trying to get the hang of forEach and higher order functions just for fun.) Anyway, this will run on page load, and I think I'm pretty close:

function background(){
    var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];
    function change(newcolor){
        document.body.style.backgroundColor=newcolor;
    }
    colorArray.forEach(function(color){
        setTimeout(change(color), 1000);
    });
}

The problem is that the background color is only showing the last element in the array. I also am not sure how to start the forEach loop over again when it is has finished. Thanks for any help!

I've been trying to e up with the most concise way that I can possibly change background colors using JavaScript. (Trying to get the hang of forEach and higher order functions just for fun.) Anyway, this will run on page load, and I think I'm pretty close:

function background(){
    var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];
    function change(newcolor){
        document.body.style.backgroundColor=newcolor;
    }
    colorArray.forEach(function(color){
        setTimeout(change(color), 1000);
    });
}

The problem is that the background color is only showing the last element in the array. I also am not sure how to start the forEach loop over again when it is has finished. Thanks for any help!

• javascript
• arrays
• foreach

• Do you have to use JavaScript? What about CSS transitions and keyframes? – zero298 Commented Jan 8, 2016 at 5:09

3 Answers 3

Like this ... Also can ...

var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

var count = 0;

    function change() {
        document.body.style.backgroundColor = colorArray[count];
        count++;
        if(count == colorArray.length) {
            count = 0;
        }
    }

    setInterval(function(){
        change();
    }, 1000);

The problem is you are passing the value returned by change as the timeout handler, instead you need to pass a function reference.

If you want to have an infinite loop, then you can use setInterval() like

function background() {
  var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

  function change() {
    index = index >= colorArray.length ? 0 : index;
    document.body.style.backgroundColor = colorArray[index++];
  }

  var index = 0;
  var interval = setInterval(change, 1000);
}

background();

If you want to use setTimeout() itself and want to iterate only once then you can use

function background() {
  var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

  function change(newcolor) {
    document.body.style.backgroundColor = newcolor;
  }
  colorArray.forEach(function(color, i) {
    setTimeout(change.bind(undefined, color), i * 1000);
  });
}

background();

Improving ....

var colorArray = ["#14183b", "#002e2e", "#0d2d40", "#173052", "#194759", "#296b73"];

 var count = 0;

setInterval(function(){
    document.body.style.backgroundColor = colorArray[count];
    count++;
    if(count == colorArray.length) {
        count = 0;
    }
}, 1000);