Menu
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 variable to change in the function. Here's my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changecolors() {
x = 1; // <-- I know this is wrong, I just don't know where to place it
var t = setTimeout("change()", 1000);
}
function change() {
while(x < 3) {
if(x = 1) {
color = "red";
x++;
} else if (x = 2) {
color = "green";
x = 1;
}
document.body.style.background = color;
}
}
</head>
<body onload="changecolors()">
</body>
</html>
896
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...
setInterval instead of setTimeout. setTimeout only executes once.= assigns, even in an if statement. You need == (or better, ===).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 <body>, 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.
125
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
