Change background color between red and green every second

Question

I\'m trying to make a webpage change the background color every one second using JavaScript. I\'m using setTimeout but I can\'t figure out how to get my variabl

Answer 1

There are several problems here. I’ll just fix your code:

var x;

function changecolors() {
    x = 1;
    setInterval(change, 1000);
}

function change() {
    if (x === 1) {
        color = "red";
        x = 2;
    } else {
        color = "green";
        x = 1;
    }

    document.body.style.background = color;
}

Basically...

• You need setInterval instead of setTimeout. setTimeout only executes once.
• = assigns, even in an if statement. You need == (or better, ===).
• You shouldn't pass a string to setTimeout or setInterval. Instead, pass a function.

Another point of note: you shouldn’t use the on* attributes of HTML elements for event listeners, but especially not on , since you can do this in JavaScript instead, and be unobtrusive:

window.onload = changecolors;

Of course, you could do it with fewer functions and no pollution of the global namespace.