I am trying to create a simple JS countdown timer. The timer-- is not working.
function setTimer() {
var x = parseInt(document.getElementById("input").value);
var timer = Math.floor(x * 60);
var mins = Math.floor(timer / 60);
var secs = Math.floor(timer % 60);
var text =
document.getElementById("output");
text.innerHTML = mins + " : " +
secs;
timer--;
setTimeout('setTimer()', 1000);
}<input type="text" id="input">
<button id="btn" onClick="setTimer()"> Start </button>The timer is not reducing. Can you please help?
Your timer variable is not changing because it is taking the value again from the input. I have simplified your code below
<html>
<script>
var timer;
function setTimer() {
var x = parseInt(document.getElementById("input").value);
timer = Math.floor(x * 60);
handleTimer(timer);
}
function handleTimer(timer) {
var mins = Math.floor(timer / 60);
var secs = Math.floor(timer % 60);
document.getElementById("output").value = mins + " : " + secs;
timer--;
setTimeout(function () {
handleTimer(timer);
}, 1000);
}
</script>
<input type="text" id="input" placeholder="input" />
<input type="text" id="output" placeholder="output" />
<button id="btn" onClick="setTimer()">Start</button>
</html>