ciclismo através de cores de fundo com javascript

Question

Alguém pode me dizer por que o código a seguir pode não percorrer a variedade de cores definida aqui:

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

e aqui é a linha de código em questão:

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

Parece que deve funcionar e já vi vários exemplos onde o código como este produzidas uma cor ciclismo efeito. Alguém vê um problema com o código acima (ou abaixo)?

Função inteiro (um trabalho em andamento):

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 a ajuda é muito apreciada. Graças

Answer 1

Um par de coisas diferentes. Em primeiro lugar, parece que você está combinando elementos cujos IDs contêm um espaço seguido por 4 dígitos. Eu não acho que os espaços são permitidos em ids. Eu realmente gostaria de ver o HTML para os elementos que devem ser combinados. Em segundo lugar, eu acho que você quer currElm atribuir a uma nova variável que será capturada no seu manipulador de setInterval. Se você não fizer isso, eu acho que pode sempre se referem ao último elemento correspondente em vez de cada elemento correspondente.

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 Também corrigir o parêntese extra na manipulador de intervalo.

Answer 2

Erro de sintaxe, extra ')' parêntese direito no fim da linha:

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

Answer 3

Eu vejo o parêntese extra de direito, bem!

Mas a variável nextColor já está inicializado para zero, logo após a matriz de cores.

Este é um trabalho para Firebug. Você pode definir o ponto de interrupção direito antes de chegar a chamada setInterval, e testar as diversas variáveis ??que estão em função anônima do setInterval.