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

fixed the extra parenthesis, still not working. I already have a style assigned to the element, could that be a source of the problem? — danwoods
– danwoods, Commented Jun 24, 2009 at 2:53
ok, firebug said currElm is null, but I don't understand how that can be. I know it enters the "if(elmIndex == index){" section... — danwoods
– danwoods, Commented Jun 24, 2009 at 3:02

tvanfosson · Accepted Answer · 2009-06-24 02:29:38Z

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.

answered Jun 24, 2009 at 2:29

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

danwoods Over a year ago

It should only match one element, I'm trying to highlight a single row in a table. I know it finds the correct element.Thanks though

John Kugelman · Accepted Answer · 2009-06-24 02:34:16Z

1

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

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

edited Jun 24, 2009 at 2:34

answered Jun 24, 2009 at 2:28

John Kugelman

364k70 gold badges555 silver badges600 bronze badges

Comments

Jeff Meatball Yang · Accepted Answer · 2009-06-24 02:32:19Z

0

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.

answered Jun 24, 2009 at 2:32

Jeff Meatball Yang

39.2k27 gold badges94 silver badges125 bronze badges

Collectives™ on Stack Overflow

cycling through background colors with javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related