Начать обратный отсчет в текущем активном элементе

Question

У меня bootstrap многоступенчатая форма. Там <span class="timer"></span> на каждом шаге. Моя проблема в том, что таймер работает только на первом шаге. Я не знаю, как начать обратный отсчет на другом шаге (тег fieldset). Код таймера:

  var counter = seconds;

  var interval = setInterval(() => {
   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

    counter--;
    if(counter < 0 ){
      clearInterval(interval);
    };
  }, 1000);
};

Я тоже пробовал это:

        $("#nextStep").click(function() {
            startCountdown(60);
        });

Answer 1

Вам нужно изменить <span class="timer"></span> на <span id="timer"></span>. И с }; в конце выдает ошибку, поэтому я использовал

var counter = seconds;

  var interval = setInterval(() => {
   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

    counter--;
    if(counter < 0 ){
      clearInterval(interval);
    };
  }, 1000);

вместо

var counter = seconds;

  var interval = setInterval(() => {
   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

    counter--;
    if(counter < 0 ){
      clearInterval(interval);
    };
  }, 1000);
};

Вы можете сделать

var counter = seconds;
function startInterval() {
   var interval = setInterval(() => {
   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

   counter--;
   if(counter < 0 ){
     clearInterval(interval);
   };
  }, 1000);
}

и используйте startInterval() для запуска таймера. Если вам нужно что-то сделать по истечении секунд таймера, вы можете сделать

var counter = seconds;
function startInterval() {
   var interval = setInterval(() => {
   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

   counter--;
   if(counter < 0 ){
     clearInterval(interval);
     var timerOver = true;
   };
  }, 1000);
};

Answer 2

document.getElementById('timer') всегда возвращает первый элемент, найденный в DOM! вы должны использовать разные идентификаторы (#timer-1, #timer-2, et c) и выбирать их условно по мере прохождения каждого шага.

вы можете расширить свой метод startCountdown следующим образом:

function startCountDown (selectorId, seconds) {
  var counter = seconds;

  var interval = setInterval(() => {
   document.getElementById(selectorId).innerHTML = "("+counter + " seconds left)" ;

    counter--;
    if(counter < 0 ){
      clearInterval(interval);
    };
  }, 1000);
};

let idCounter = 0

$("#nextStep").click(function() {
   // generate new counter id based on your progression
   // this assumes your ids are timer-0, timer-1, etc
   startCountdown(60, 'timer-' + idCounter);
   idCounter++
});

Еще лучший подход - использовать классы и getElementsByClassName(), а затем просто перебрать массив:

function startCountDown (selectorId, timerCounter, seconds) {
  var counter = seconds;

  var interval = setInterval(() => {
   // getElementsByClassName returns a DOMNodeList of matched items that you can use indexes to access
   document.getElementByClassName(selectorId)[timerCounter].innerHTML = "("+counter + " seconds left)" ;

    counter--;
    if(counter < 0 ){
      clearInterval(interval);
    };
  }, 1000);
};

let timerCounter = 0

$("#nextStep").click(function() {
   startCountdown(60, 'timer', timerCounter);
   timerCounter++
});