How to pause and resume timer in JavaScript?

Question

I've been trying to create my own "pomodoro" like timer and got stuck when trying to pause and pause and resume the timer. I want my timer to start at 40:00, it currently runs when the "Start" button is pressed and stops when I press a "Stop" button, but it doesn't resume when I press the "Start" button again.

 var startButton = document.getElementById("startButton"); var stopButton = document.getElementById("stopButton"); var resetButton = document.getElementById("resetButton"); var isRunning = false; startButton.addEventListener("click", function () { trigger(); }); stopButton.addEventListener("click", function () { stopTimer(); }); resetButton.addEventListener("click", function() { resetTimer(); }); function startTimer(duration, display) { var timer = duration, minutes, seconds; if (isRunning === false) { isRunning = setInterval(function () { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; timer--; }, 1000); } else { isRunning = !isRunning; } if (timer < 0) { clearInterval(isRunning); } }; function trigger() { var fiveMinutes = 2400, display = document.querySelector('#time'); startTimer(fiveMinutes, display); }; function stopTimer() { clearInterval(isRunning); };

 <div class="main-downwards-buttons"> <button id="startButton" type="button" class="btn-success">Start</button> <button id="stopButton" type="button" class="btn-danger">Stop</button> <button id="resetButton" type="button" class="btn-secondary">Reset</button> </div>

Answer 1

Declare fiveMinutes in the global scope and reset it only when reset button is clicked.

And you need to update its value inside the anonymous function to keep it running. The issue here is that you can have only one counter.

 var startButton = document.getElementById("startButton"); var stopButton = document.getElementById("stopButton"); var resetButton = document.getElementById("resetButton"); var isRunning = false; var fiveMinutes = 2400; var display = document.querySelector('#time'); startButton.addEventListener("click", function () { startTimer(fiveMinutes, display); }); stopButton.addEventListener("click", function () { stopTimer(); }); resetButton.addEventListener("click", function() { stopTimer(); fiveMinutes = 2400; display.textContent = '0:00'; }); function startTimer(duration, display) { var timer = duration, minutes, seconds; if (isRunning === false) { isRunning = setInterval(function () { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; timer --; // You need to update the original variable fiveMinutes --; }, 1000); } else { isRunning = !isRunning; } if (timer < 0) { stopTimer(); } }; function stopTimer() { clearInterval(isRunning); isRunning = false; };

 <div id="time">0:00</div> <div class="main-downwards-buttons"> <button id="startButton" type="button" class="btn-success">Start</button> <button id="stopButton" type="button" class="btn-danger">Stop</button> <button id="resetButton" type="button" class="btn-secondary">Reset</button> </div>