CODEWITHSUNDEEP
javascripthtmlloops
Justin Yoder
Justin Yoder

Reputation: 537

Change background color between red and green every second

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>

Upvotes: 4

Views: 50139

Answers (10)

Narendran Parivallal
Narendran Parivallal

Reputation: 1130

I have created this function called toggle_colour for the very same purpose.

function toggle_color(color1, color2, cycle_time, wait_time) { 
   setInterval(function first_color() {
       document.body.style.backgroundColor = color1;
       setTimeout(change_color, wait_time);
   }, cycle_time);

    function change_color() {
     document.body.style.backgroundColor = color2;
    }
}

Now you can simply copy the above code and call the function with two color codes. Like,

toggle_color("#61beb3", "#90a2c6", 4000, 2000);

You can check the complete demo and more advanced toggle color functions in the article, Changing background color every X seconds in Javascript

Disclaimer: I am the author of this tutorial article.

Upvotes: 0

Ry-
Ry-

Reputation: 224913

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 <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.

Upvotes: 14

MaxArt
MaxArt

Reputation: 22617

If you expect the browser to support CSS animations, you can so something more interesting and perhaps less annoying. Define in your style sheet:

body {
    -webkit-animation: changebg 1s infinite cubic-bezier(1,0,0,1);
       -moz-animation: changebg 1s infinite cubic-bezier(1,0,0,1);
            animation: changebg 1s infinite cubic-bezier(1,0,0,1);
}

@-moz-keyframes changebg {
      0% {background-color: #f00;}
     50% {background-color: #fff;}
    100% {background-color: #f00;}
}

@-webkit-keyframes changebg {
      0% {background-color: #f00;}
     50% {background-color: #fff;}
    100% {background-color: #f00;}
}

@keyframes changebg {
      0% {background-color: #f00;}
     50% {background-color: #fff;}
    100% {background-color: #f00;}
}

And you're done, without JavaScript at all. Unfortunately, CSS animations are not standard yet, so those hinge on prefixes, hence I had to repeat for -moz- and -webkit-. It doesnt work on Opera and IE, for now.

Upvotes: 2

Esteban Angee
Esteban Angee

Reputation: 548

You should definetly read some basic JavaScript tutorial or book. I am also new to JavaScript but some reading has helped. Here http://www.w3schools.com/js/ you can find some good stuff as reference.

This should do the trick

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">

            function change_color(flag){
                var color = null;
                if (flag === true){
                    var color = "red";
                }else{
                    var color = "green";
                }
                document.body.style.background = color;
                flag = !flag
                var t=setTimeout(function(){change_color(flag)},1000);
            }
        </script>
    </head>

    <body onload="change_color(true)">
</body>

If you are going to manipulate the DOM a lot i recommend JQuery

Upvotes: 1

scartag
scartag

Reputation: 17680

Your code is missing the closing </script> tag and other issues mentioned above.

Find below a fix of your code that removes the global variable.

 <html> 
     <head> 
         <script type="text/javascript">
         function changecolors() {    
             var t = setInterval('change()',1000); 
         } 

         function change() {
             var color = document.body.style.background;

             if(color == "red") {
                 document.body.style.background = "green";
             } else {
                 document.body.style.background = "red";
             }
         } 
        </script>
     </head> 
     <body onload="javascript:changecolors()"> 
     </body> 
 </html>

Upvotes: 0

dnuttle
dnuttle

Reputation: 3830

For one thing, this:

if (x = 1){

Should be this:

if(x == 1) {

Your statement sets x to 1, rather than tests it to see if it's 1.

Upvotes: 1

bookcasey
bookcasey

Reputation: 40463

Also, consider doing it with CSS. Demo.

@-webkit-keyframes blink {
        0%   { background:red; }
        50%  { background:green;}
        100% { background:red; }
}
@-moz-keyframes blink {
        0%   { background:red; }
        50%  { background:green;}
        100% { background:red; }
}
@-ms-keyframes blink {
        0%   { background:red; }
        50%  { background:green;}
        100% { background:red; }
}
body{
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

Upvotes: 5

JCOC611
JCOC611

Reputation: 19719

I would advice not to do this, since it might be pretty annoying, but this should work:

var x = false;
function changecolors(){
  var color=(x)?"green":"red"; // If X == true, then set to green, if false then blue
  document.body.style.background = color; // Set color
  x=!x; // Invert X
}

And then in the body:

<body onload="setInterval(changecolors,1000)">

PS: Sorry if I'm not answering the question right...this code will change the background from blue to green every second repeatedly for an infinite amount of time. (What I mean is that I kinda redid your code rather than explaining what was wrong with yours...)

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116110

Blink fiddle:

http://jsfiddle.net/GolezTrol/R4c5P/1/

Uses this function:

function initBlink()
{
    var state = false;
    setInterval(function()
        {
            state = !state;
            var color = (state?'red':'green');
            document.getElementById('test').style.color = color;
        }, 1000);
}

Uses closure to keep the state out of the global scope. Uses setInterval instead of setTimeout for repeated calling, although that may not be convenient. Both setInterval and setTimeout return a handle you can save and use to stop the timer, if you want, but since you didn't ask about that, I left it out for simplicity.

The function just defines an anonymous callback that toggles a boolean and sets the color of a test div.

Upvotes: 6

Matt
Matt

Reputation: 23749

x = 1; assigns x a value of 1, even in an if statement. Use x == 1 in if statements to keep the value of your variable unchanged.

Upvotes: 1

Related Questions