I have a button when clicked starts a timer. Problem is when the button is clicked again the timer doesn't restart, it just goes crazy fast.
var timeleft = 1800;
function rig() {
var Timer = setInterval(function
function1(){
document.getElementById("countdown").innerHTML = Math.floor(timeleft / 60) + ":" + (timeleft % 60 ? timeleft % 60 : '00') + " "+"minutes remaining";
timeleft -= 1;
if(timeleft <= 0){
clearInterval(Timer);
document.getElementById("countdown").innerHTML = "Time out"
}
}, 1000);
console.log(countdown)
}
<p id="countdown"></p>
<button onclick="rig();">Start Time</button>
Use a variable that you set whenever the timer gets started and stopped.
Pause the time
let timeBreak = false;
var timeleft = 1800;
function rig() {
if (!timeBreak) {
timer = setInterval(function function1() {
document.getElementById("countdown").innerHTML = Math.floor(timeleft / 60) + ":" + (timeleft % 60 ? timeleft % 60 : '00') + " " + "minutes remaining";
timeleft -= 1;
if (timeleft <= 0) {
clearInterval(timer);
document.getElementById("countdown").innerHTML = "Time out"
}
}, 1000);
timeBreak = true;
} else {
clearInterval(timer);
timeBreak = false;
}
}<p id="countdown"></p>
<button onclick="rig();">Start Time</button>Reset the time
let timeBreak = false;
var timeleft = 1800;
function rig() {
if (!timeBreak) {
timer = setInterval(function function1() {
document.getElementById("countdown").innerHTML = Math.floor(timeleft / 60) + ":" + (timeleft % 60 ? timeleft % 60 : '00') + " " + "minutes remaining";
timeleft -= 1;
if (timeleft <= 0) {
clearInterval(timer);
document.getElementById("countdown").innerHTML = "Time out"
}
}, 1000);
timeBreak = true;
} else {
document.getElementById("countdown").innerHTML = ''; // Remove that line if you want to see the stopped time
clearInterval(timer);
timeleft = 1800;
timeBreak = false;
}
}<p id="countdown"></p>
<button onclick="rig();">Start Time</button>Also ensure that you are not using var, let or const before timer, since you want to use that variable out of scope.