在当前活动元素中开始倒计时

Question

I have bootstrap multi-step form. There's <span class="timer"></span> at each step. My problem is that timer works only at first step. I don't know how to start countdown on another step (fieldset tag). Timer code:

  var counter = seconds;

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

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

I also tried this:

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

Answer 1

document.getElementById('timer') always returns the first item found in the DOM! you should use different id's ( #timer-1 , #timer-2 , etc) and select them conditionally as you progress through each step.

you can augment your startCountdown method like this:

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++
});

Even better approach would be to use classes and getElementsByClassName() and then simply iterate over the array:

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++
});

Answer 2

You need to change <span class="timer"></span> to <span id="timer"></span> . And with }; at the end in gives an error for me, so I used

var counter = seconds;

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

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

instead of

var counter = seconds;

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

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

You can do

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

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

and use startInterval() to start the timer. If you need to do something when the timer seconds are over, you can do

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);
};