cycling through background colors with javascript

Question

Can anyone tell me why the following code might not cycle through the array of colors defined here:

var colors = ["white", "yellow", "orange", "red"];

and here is the line of code in question:

setInterval(function(){
          currElm.style.background = colors[(nextColor++)%(colors.length)]);
      }, 500);

It seems like that should work and I've seen several examples where code just like this produced a color cycling effect. Does anyone see a problem with the above (or below) code?

Whole function(a work in progress):

function setHighlight(elmId, index, songLength){
//alert("called set highlight, params are " + elmId + " " + index + " " + songLength);
var colors = ["white", "yellow", "orange", "red"];
var nextColor = 0;
if(index < 10)
    index = "000" + (index);
  else if (index < 100)
    index = "000" + (index);
  else if(index < 1000)
    index = "0" + (index);
  if(index >= 1000)
    index = index;
//alert("called set highlight, params are " + elmId + " " + index + " " + songLength);

//this will be useful for finding the element but pulsate will not work, need to       research animations in javascript

var mainElm = document.getElementById('active_playlist');
var elmIndex = "";

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
  if(currElm.nodeType === 1){

  var elementId = currElm.getAttribute("id");

  if(elementId.match(/\b\d{4}/)){

    elmIndex = elementId.substr(0,4);
    alert(currElm.getAttribute('id'));

    if(elmIndex == index){
        setInterval(function(){
          currElm.style.background = colors[(nextColor++)%(colors.length)]);
      }, 500);
    }
  }
}
}//end for

}

All help is greatly appreciated. Thanks

Answer 1

A couple of different things. First, it looks like you are matching elements whose ids contain a space followed by 4 digits. I don't think that spaces are allowed in ids. I'd really like to see the HTML for the elements that should be matched. Second, I think you want to assign currElm to a new variable that will be captured in your setInterval handler. If you don't, I think it may always refer to the last element matched instead of each element matched.

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){

  if(currElm.nodeType === 1){

    var elementId = currElm.getAttribute("id");

    if(elementId.match(/\b\d{4}/)){

      elmIndex = elementId.substr(0,4);
      alert(currElm.getAttribute('id'));

      if(elmIndex == index){
          var that = currElm;
          setInterval(function(){
              that.style.background = colors[(nextColor++)%(colors.length)];
          }, 500);
      }
    }
  }

}//end for

EDIT Also fix the extra parenthesis in the interval handler.

Answer 2

Syntax error, extra right parenthesis ')' at end of line:

currElm.style.background = colors[(nextColor++)%(colors.length)]);

Answer 3

I see the extra right parenthesis as well!

But the nextColor variable is already initialized to zero, right after the colors array.

This is a job for Firebug. You can set the breakpoint right before you get to the setInterval call, and test the various variables that are in the setInterval's anonymous function.