Cycle backgroundColor through row of divs one at a time

JavaScript
1

Basically what I’m trying to do is to step through each ‘div’ element and one by one change the background color to red and then back to it’s default color once it has passed each ‘div’. It should look like one animated red box going left to right, over and over again. I can’t figure out the logic for this. How can I step through each div and change the color to red? I tried ‘setInterval’ but it just fills all the divs with red. So I’m thinking somehow I have to change the color one by one, but I’m not sure how to break this down. I noticed that if I do modulo on the array of divs I can get the first div to be red, so I don’t know if I’m on the right track, but now I’m basically stuck. I also thought that maybe if I create divs each with a unique ID that I would be able to do something with that but that went nowhere as well. How can I break this down logically with Javascript? What am I am doing wrong?

http://dl.dropboxusercontent.com/u/1957768/cycle.html



<html>
<head>
<style>
div{
	width:20px;
	height:20px;
	float:left;
	border: 1px solid black;
	margin:1px;
	background-color: white;
}
</style>
</head>
<body>
<script>
var getDivs = document.getElementsByTagName('div');

function makeDiv() {

    for(var i = 0; i < 20; i++){
          var divs = document.createElement('div');

          document.body.appendChild(divs);
    }
}


function loops(i){

	for(var i = 0; i < 20; i++){

       getDivs[i%1].style.backgroundColor="red";

    }
 }



makeDiv();

setInterval(function(){loops();}, 500);


</script>
</body>
</html>
2 
<html>
<head>
<style>
div{
	width:20px;
	height:20px;
	float:left;
	border: 1px solid black;
	margin:1px;
	background-color: white;
}
</style>
</head>
<body>
<script>
var getDivs = document.getElementsByTagName('div');

function makeDiv() {

    for(var i = 0; i < 20; i++){
          var divs = document.createElement('div');

          document.body.appendChild(divs);
    }
}


function loops(n){
	for(var i = 0; i < 20; i++){

       getDivs[i].style.backgroundColor=i==n%20?"red":'white';

    }
   n++;
   loops.to=setTimeout(function(){loops(n);}, 500);
 }



makeDiv();
loops(0);


</script>
</body>
</html>
3

I didn’t think that the number of divs mattered when doing the comparison, I should of thought about it. Also one thing that doesn’t make sense to me is the

loops.to

part of the setTimeout. What is

.to

doing? How is that making the code work, is it a method?

4

assigning the timeout to the function loops .to property allows the loop to be stopped

<html>
<head>
<style>
div{
	width:20px;
	height:20px;
	float:left;
	border: 1px solid black;
	margin:1px;
	background-color: white;
}
</style>
</head>
<body>

<input type="button" name="" value="Start" onclick="loops(0)" />
<input type="button" name="" value="Stop" onclick="clearTimeout(loops.to);" />
<script>
var getDivs = document.getElementsByTagName('div');

function makeDiv() {
    clearTimeout(loops.to);

    for(var i = 0; i < 20; i++){
          var divs = document.createElement('div');

          document.body.appendChild(divs);
    }
}


function loops(n){
	for(var i = 0; i < 20; i++){

       getDivs[i].style.backgroundColor=i==n%20?"red":'white';

    }
   n++;
   loops.to=setTimeout(function(){loops(n);}, 500);
 }



makeDiv();
loops(0);


</script>
</body>
</html>
5

Yeah I understand that setTimeout makes a delay but why do you have to use ‘.to’ after loops? I don’t see .‘to’ in the javascript reference. Where is ‘.to’ coming from?

6

function loops is an object

loops.to is a property with a name of to of the object loops
it could be any unique name

or I could have defined a global variable and used that
but the use of global variables should be avoided