Проблема с setInterval в JS

236

26 ноября 2016, 17:59

Добрый вечер! Возникла проблема с решением задачи. Есть 9 блоков (массив mult от 0 до 8). Задача: циклически изменять фон каждого блока через некоторый интервал времени. Для изменения цвета фона есть функция colorChange(i, color). К ней претензий нет. Проблема в том, что фон меняется только при первом прохождении по блоками от 0 до 8. Затем, когда счетчик возвращаю в исходное значение 0, чтобы снова пройтись по всем блоками, цвет фона больше не меняется. Ниже мой код.

    var mult = document.getElementsByClassName('mult');
    function colorChange(i, color) {
      mult[i].classList.add(color);
    }
    var i = 0;
    var timerId = setInterval(function() {
      if (i != 0) {
        colorChange(i-1, 'white');
      }
      if (i === 9) {
        i = 0;
      }
      colorChange(i, 'yellow');
      i++;
      }, 300);

Answer 1

Ваша проблема в том, что раз добавив класс элементам вы его потом не удаляете. Вот пример: если добавляется класс white, то удаляется класс yellow и наоборот.

 var mult = document.getElementsByClassName('mult'); 
 
 function colorChange(i, color, dcolor) { 
   mult[i].classList.add(color); 
   mult[i].classList.remove(dcolor) 
 } 
 
 var i = 0; 
 var timerId = setInterval(function() { 
   if (i != 0) { 
     colorChange(i - 1, 'white', 'yellow'); 
   } 
 
   if (i === 9) { 
     i = 0; 
   } 
   colorChange(i, 'yellow', 'white'); 
   i++; 
 
 }, 300);

.white { 
  background-color: white; 
} 
.yellow { 
  background-color: yellow; 
}

<span class="mult">111</span> 
<span class="mult">222</span> 
<span class="mult">333</span> 
<span class="mult">444</span> 
<span class="mult">555</span> 
<span class="mult">666</span> 
<span class="mult">777</span> 
<span class="mult">888</span> 
<span class="mult">999</span>