faire défiler les couleurs de fond avec javascript

Question

Quelqu'un peut-il me dire pourquoi le code suivant peut ne pas parcourir le tableau de couleurs défini ici:

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

et voici la ligne de code en question:

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

Il semble que cela devrait fonctionner et j’ai vu plusieurs exemples où un code comme celui-ci produisait un effet de cycle de couleur. Quelqu'un voit-il un problème avec le code ci-dessus (ou ci-dessous)?

Fonction entière (travail en cours):

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

}

Toute aide est grandement appréciée. Merci

Answer 1

Deux choses différentes. Premièrement, il semble que vous associez des éléments dont les identifiants contiennent un espace suivi de 4 chiffres. Je ne pense pas que les espaces sont autorisés dans les identifiants. J'aimerais vraiment voir le code HTML pour les éléments qui doivent être mis en correspondance. Deuxièmement, je pense que vous souhaitez affecter currElm à une nouvelle variable qui sera capturée dans votre gestionnaire setInterval. Si vous ne le faites pas, je pense que cela peut toujours faire référence au dernier élément correspondant au lieu de chaque élément correspondant.

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

MODIFIER : corrigez également les parenthèses supplémentaires dans le gestionnaire d'intervalles.

Answer 2

Erreur de syntaxe, parenthèse extra droite ')' en fin de ligne:

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

Answer 3

Je vois aussi la parenthèse extra droite!

Mais la variable nextColor est déjà initialisée à zéro, juste après le tableau de couleurs.

Ceci est un travail pour Firebug. Vous pouvez définir le point d'arrêt juste avant l'appel de setInterval et tester les différentes variables de la fonction anonyme de setInterval.