在當前活動元素中開始倒計時

Question

我有引導程序多步驟形式。 每一步都有<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

document.getElementById('timer')總是返回在 DOM 中找到的第一項！ 您應該使用不同的 ID（ #timer-1 、 #timer-2等）並在您完成每個步驟時有條件地選擇它們。

你可以像這樣增加你的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++
});

Answer 2

您需要將<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);
};