Почему classList.add не работает после clearInterval()

223

19 декабря 2017, 19:52

До того, как сработает clearInterval(), всё работает, но после прохождения цикла и очищения интервала, невозможно по новой добавить класс, чтобы замкнуть функцию на бесконечное выполнение. Почему так происходит и как это исправить???

var block = document.querySelectorAll('li');  
var intervalId; 
var counter = 0; 
 
intervalId = setInterval(function() { 
    if (counter == block.length) { 
        function f1(){ 
            block[0].classList.remove('active');             
            block[1].classList.remove('active');             
            block[2].classList.remove('active');            
            block[3].classList.remove('active');           
            block[4].classList.remove('active');             
            block[5].classList.remove('active');           
            clearInterval(intervalId); 
        } 
         f1(); 
     }; 
 
    block[counter].classList.toggle('active'); 
    counter++; 
 
 
   
}, 300);

ul { 
  margin: 50px auto; 
  width: 250px; 
} 
   
li { 
    list-style-type: none; 
} 
li.active { 
      list-style-type: circle; 
}

    <ul> 
        <li>Первый</li> 
        <li>Второй</li> 
        <li>Третий</li> 
        <li>Четвёртый</li> 
        <li>Пятый</li> 
        <li>Шестой</li> 
      </ul>

Answer 1

var block = document.querySelectorAll('#mylist > li');  
var intervalId; 
var counter = 0; 
 
intervalId = setInterval(() => { 
 
    if (counter === block.length) { 
            block.forEach(b => b.classList.remove('active')); 
            counter = 0; 
     }else{ 
         block[counter].classList.toggle('active'); 
         counter++; 
     } 
}, 300);

ul { 
  margin: 50px auto; 
  width: 250px; 
} 
   
li { 
    list-style-type: none; 
} 
li.active { 
      list-style-type: circle; 
}

    <ul id='mylist'> 
        <li>Первый</li> 
        <li>Второй</li> 
        <li>Третий</li> 
        <li>Четвёртый</li> 
        <li>Пятый</li> 
        <li>Шестой</li> 
      </ul>