циклический переход по фоновым цветам с использованием JavaScript

Question

Может кто-нибудь сказать мне, почему следующий код может не циклически проходить через массив цветов, определенный здесь:

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

и вот строка кода, о которой идет речь:

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

Кажется, это должно сработать, и я видел несколько примеров, когда код, подобный этому, вызывал эффект циклического изменения цвета. Кто-нибудь видит проблему с кодом выше (или ниже)?

Вся функция (работа в процессе):

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

}

Вся помощь очень ценится. Спасибо

Answer 1

Пара разных вещей. Во-первых, похоже, что вы сопоставляете элементы, идентификаторы которых содержат пробел, за которым следуют 4 цифры. Я не думаю, что пробелы разрешены в идентификаторах. Мне бы очень хотелось увидеть HTML для элементов, которые должны быть сопоставлены. Во-вторых, я думаю, что вы хотите присвоить currElm новой переменной, которая будет записана в вашем обработчике setInterval. Если вы этого не сделаете, я думаю, что он всегда может ссылаться на последний найденный элемент, а не на каждый соответствующий элемент.

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

РЕДАКТИРОВАТЬ Также исправьте лишние скобки в обработчике интервалов.

Answer 2

Синтаксическая ошибка, лишние правые скобки ')' в конце строки:

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

Answer 3

Я вижу лишнюю правую скобку!

Но переменная nextColor уже инициализируется нулем сразу после массива цветов.

Это работа для Firebug. Вы можете установить точку останова непосредственно перед вызовом setInterval и проверить различные переменные, которые есть в анонимной функции setInterval