尝试使用相同的按钮暂停和恢复计时器

Question

I am having a little trouble with this code. I am currently have a button that when clicked starts a timer. It then also changes the icon of the button from a start icon to a stop icon. I would like to stop this timer when the button is clicked again and have it switch back the icon from start to stop. I have been stuck for awhile and tried many things but cant get it to work and would appreciate any help. I am sure its a simple issue I am just new to javascript. Thanks.

(function () {
"use strict";
  var minutesLabel = document.getElementById('t1-min'),
    secondsLabel = document.getElementById('t1-sec'),
    resetButton = document.getElementById('t1-reset'),
    startButton = document.getElementById('t1-play'),
    timer = null;


function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    return {
        'total': t,
        'minutes': minutes,
        'seconds': seconds
    };

}

function initializeClock(endtime) {
        var timeinterval = setInterval(function () {
            var t = getTimeRemaining(endtime);
            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
            minutesLabel.innerHTML = t.minutes;
            secondsLabel.innerHTML = pad(t.seconds);
        }, 1000);
}

startButton.onclick = function runClock() {
    var timeInMinutes = minutesLabel.innerHTML,
        currentTime = Date.parse(new Date()),
        deadline = new Date(currentTime + timeInMinutes * 60 * 1000);
    initializeClock(deadline);
    startButton.innerHTML = ('<i class="far fa-stop-circle fa-2x float-right">');
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    } else {
        return valString;
    }
}

})();

Answer 1

Firstly, make sure that the event listener in placed correctly on the startButton element by adding a function on addEventLister method like that:

startButton.addEventListener("click", function() {
   //code goes here
});

Then initialize the timeinterval variable in the global scope of the code so that it can be accessed from all functions, and add a const in which you can save the initial text of the startButton :

(function () {
  "use strict";
  const START_BUTTON_INITIAL_TEXT = "Start";  // initial constant text of the start button
  var minutesLabel = document.getElementById('t1-min'),
  secondsLabel = document.getElementById('t1-sec'),
  resetButton = document.getElementById('t1-reset'),
  startButton = document.getElementById('t1-play'),
  timer = null,
  timeinterval; // declared in the global scope

Then add an id equal to t1-stop for the stopButton icon element to make sure that it can be accurately accessed by the Javascript file from the DOM:

startButton.innerHTML = ('<i id="t1-stop" class="far fa-stop-circle fa-2x float-right">');

lastly add this if statement in addEventListener function of startButton to check whether a stop button exists in the DOM when the startButton is clicked:

startButton.addEventListener("click", function() {
  if (document.getElementById("t1-stop") != null) { 
    clearInterval(timeinterval);
    var stopButton = document.getElementById("t1-stop");
    startButton.removeChild(stopButton);
    startButton.innerHTML = START_BUTTON_INITIAL_TEXT;
  } 

The above code stops the timeinterval and removes the stopButton from the DOM then replaces the innerHTML of startButton with the initial text set as a constant at the top variable declaration.

---

All in all, your event listener function for the startButton should look something like that:

startButton.addEventListener("click", function() {
    if (document.getElementById("t1-stop") != null) { 
        clearInterval(timeinterval);
        var stopButton = document.getElementById("t1-stop");
        startButton.removeChild(stopButton);
        startButton.innerHTML = START_BUTTON_INITIAL_TEXT;
        return; 
    }
    var timeInMinutes = minutesLabel.innerHTML,
        currentTime = Date.parse(new Date()),
        deadline = new Date(currentTime + timeInMinutes * 60 * 1000);
    initializeClock(deadline);
    startButton.innerHTML = ('<i id="t1-stop" class="far fa-stop-circle fa-2x float-right">');
});