countdown timer value reset to default value

Question

my "seconds" value starts at 59(default value)

but when the pause button is clicked (ie after the countdown begins)...

and the play button is hit again, it begins at 59! instead of the cuurent value of seconds at the time pause was clicked... please help

checkout the code, see what i did wrong...

 var y = parseInt(document.getElementById("myP1").innerHTML); var z = parseInt(document.getElementById("h1").innerHTML); var f; function addTo1() { y = y + 5; document.getElementById("myP1").innerHTML = y + "m"; document.getElementById("h1").innerHTML = y + ":" + 0 + 0; } function subFrom1() { if (y > 5) { y = y - 5; document.getElementById("myP1").innerHTML = y + "m"; document.getElementById("h1").innerHTML = y + ":" + 0 + 0; } } document.getElementById("btn").addEventListener("click", function() { var min = z - 1; var sec = z - z + 59; f = setInterval(function() { document.getElementById("h1").innerHTML = min + ":" + sec; if (min === 0 && sec === 0) { document.getElementById("h1").innerHTML = "0:00"; document.getElementById("mp3").play(); clearInterval(f); } else if (sec === 0) { min--; sec = 59; } sec--; }, 50); }); document.getElementById("btn4").addEventListener("click", function() { clearInterval(f); document.getElementById("myP1").innerHTML = 25 + "m"; document.getElementById("h1").innerHTML = "25:00"; }); document.getElementById("btn1").addEventListener("click", function() { var b = document.getElementById("h1").innerHTML; var c = parseInt(b[3] + b[4]); clearInterval(f); z = min; c = sec; if (z === 0) { clearInterval(f); } }); 

 <div class="container"> <h1>Pomodoro Clock</h1> <div class="button"> <div class="sess"> <p>Sesion Length</p> <div class="btn"> <button onclick="subFrom1()"> - </button> <p class="p1" id="myP1">25m</p> <button class="add" onclick="addTo1()"> + </button> </div> </div> </div> <h2 id="h1">25:00</h2> <button id="btn"> play</button> <button id="btn1"> pause </button> <button id="btn4"> reset</button> </div> 

Answer 1

In your function that executes when the play button is clicked, it resets both the min and sec in the first two lines. You will want to check if these values are less than the start time and then alter the value as needed. It probably also be helpful to store them as properties of a global object.

Answer 2

 var y = parseInt(document.getElementById("myP1").innerHTML); var z = parseInt(document.getElementById("h1").innerHTML); var f; function addTo1() { y = y + 5; document.getElementById("myP1").innerHTML = y + "m"; document.getElementById("h1").innerHTML = y + ":" + 0 + 0; } function subFrom1() { if (y > 5) { y = y - 5; document.getElementById("myP1").innerHTML = y + "m"; document.getElementById("h1").innerHTML = y + ":" + 0 + 0; } } document.getElementById("btn").addEventListener("click", function() { z = parseInt(document.getElementById("h1").innerHTML); var min = z - 1; var sec = z - z + 59; if(f) clearInterval(f); f = setInterval(function() { document.getElementById("h1").innerHTML = min + ":" + sec; if (min === 0 && sec === 0) { document.getElementById("h1").innerHTML = "0:00"; document.getElementById("mp3").play(); clearInterval(f); } else if (sec === 0) { min--; sec = 59; } sec--; }, 50); }); document.getElementById("btn4").addEventListener("click", function() { clearInterval(f); document.getElementById("myP1").innerHTML = 25 + "m"; document.getElementById("h1").innerHTML = "25:00"; }); document.getElementById("btn1").addEventListener("click", function() { var b = document.getElementById("h1").innerHTML; var c = parseInt(b[3] + b[4]); clearInterval(f); z = min; c = sec; if (z === 0) { clearInterval(f); } }); 

 <div class="container"> <h1>Pomodoro Clock</h1> <div class="button"> <div class="sess"> <p>Sesion Length</p> <div class="btn"> <button onclick="subFrom1()"> - </button> <p class="p1" id="myP1">25m</p> <button class="add" onclick="addTo1()"> + </button> </div> </div> </div> <h2 id="h1">25:00</h2> <button id="btn"> play</button> <button id="btn1"> pause </button> <button id="btn4"> reset</button> </div> 

The value z isnt live, so you need to reload it...