recorrer los colores de fondo con javascript

Question

¿Alguien puede decirme por qué el siguiente código podría no recorrer la matriz de colores definida aquí:

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

y aquí está la línea de código en cuestión:

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

Parece que debería funcionar y he visto varios ejemplos en los que un código como este produce un efecto de ciclo de color. ¿Alguien ve un problema con el código anterior (o inferior)?

Función completa (un trabajo en progreso):

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

}

Toda la ayuda es muy apreciada. Gracias

Answer 1

Un par de cosas diferentes. Primero, parece que estás haciendo coincidir elementos cuyos identificadores contienen un espacio seguido de 4 dígitos. No creo que se permitan espacios en los identificadores. Realmente me gustaría ver el HTML de los elementos que deberían coincidir. En segundo lugar, creo que desea asignar currElm a una nueva variable que se capturará en su controlador setInterval. Si no lo hace, creo que siempre puede referirse al último elemento emparejado en lugar de a cada elemento emparejado.

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

EDITAR También arregle el paréntesis adicional en el controlador de intervalo.

Answer 2

Error de sintaxis, paréntesis extra derecho ')' al final de la línea:

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

Answer 3

¡También veo el paréntesis derecho extra!

Pero la variable nextColor ya está inicializada a cero, justo después de la matriz de colores.

Este es un trabajo para Firebug. Puede establecer el punto de interrupción justo antes de llegar a la llamada setInterval y probar las diversas variables que se encuentran en la función anónima setInterval.