Counter for countdown timer isn't working

Question

function timerCountdown() {
  var timeleft = document.getElementById("text").value;
  timeleft -= 1;
  displayTime.innerHTML = timeleft;
  setInterval(timerCountdown, 1000);
}

Set Timer<input type="text" id="text" value="">
<br>
<span id="displayTime"></span>
<br>
<button onclick="timerCountdown()" type="button" id="button" value="submit">GENERATE</button>

I'm trying to create a countdown timer for my project, where users will be able to key in (in seconds) the value they want. However, my codes only stay at a number instead of counting down. Any help would be appreciated.

I tried creating a variable to get the element of the value, setting up an increment counter, and a setInterval, which the variable will minus the increment counter every second, but I don't think the increment counter works?

JS File

function timerCountdown() {
   var timeleft = document.getElementById("text").value;
   var counter = 0;
   counter++;
   displayTime.innerHTML = (timeleft - counter);
   setInterval(timerCountdown,1000);
}

HTML File

<input type="text" id="text" style="display: none;">
<span id="displayTime"></span>

I expected the timer to be counting down, but instead all it does is subtract the value by 1 and stays there.

use `setTimeout(timerCountdown, 1000)` - there's a difference between passing a command and passing the result of calling a command - you also don't want to call `setInterval` every time you call `timerCountdown` as that creates a new interval every time ... also, you don't want to initialise counter to zero every time ... you also have no value in your input ... there's a lot going wrong — Bravo, Nov 06 '19 at 07:33
If you have done a small research on this, you will definitely find this. https://stackoverflow.com/questions/31106189/create-a-simple-10-second-countdown — Thilina Koggalage, Nov 06 '19 at 07:51

kapitan · Accepted Answer · 2019-11-06T08:05:38.337

2

Can you try this?

function startCountDown()
{
var timeleft = document.getElementById('countdown').value;
document.getElementById('display').innerHTML = timeleft;
var downloadTimer = setInterval(function(){
  timeleft -= 1;
  document.getElementById('display').innerHTML = timeleft;
  
  if(timeleft <= 0){
    clearInterval(downloadTimer);
    document.getElementById('display').innerHTML = 'Finished';
  }
}, 1000);
}

<span id="display"></span>
<br/>
<input type="number" id="countdown">
<input type="button" value="Start countdown" onclick="startCountDown()">

edited Nov 06 '19 at 08:05

answered Nov 06 '19 at 07:37

kapitan

2,008
3
20
26

hi there, instead of setting the timeleft to 11, I wanted to let the user key in the value that they wanted. however, the number just subtracts by 1 and stays there. I've edited and included the code snippet please help me see what's wrong with it! – Cedric Woo Nov 06 '19 at 07:53
Please note that this is an unreliable way of counting down to something. Consider calculating the point in time the user wants to countdown to when starting the counter and then on each update, calculate how long time is left until that time. Check my answer for details and an example on how to do it. – EmKay Nov 06 '19 at 14:51

SQL Hacks · Answer 2 · 2019-11-06T07:48:16.770

0

You need to initialise the counter outside the function. You need to pass the function into setInterval rather than call the function.

var counter = 0;
function timerCountdown() {
        var timeleft = document.getElementById("text").value;
        counter++;
        displayTime.innerHTML = (timeleft - counter);
        setInterval(timerCountdown ,1000);
}

You still have to worry about stopping the counter.

edited Nov 06 '19 at 07:48

answered Nov 06 '19 at 07:38

SQL Hacks

1,322
1
10
15

so I would have to initialise the counter twice? once outside of the function and once in it? – Cedric Woo Nov 06 '19 at 07:43

score 0 · Answer 3 · answered Nov 06 '19 at 07:54

If I were you, I'd calculate the target time that the countdown should reach zero and calculate the difference to that time on each iteration. The reason for this is that you also have to take into account that timeouts and intervals can be suspended and thereby change speed which will result in an incorrect countdown. Take a look at Chrome: timeouts/interval suspended in background tabs?

And have a look at a quick example I hacked together below. It's a bit quirky, but it shows a good start.

<html>
<head>
<script type="text/javascript">

var targetTime;
var interval;

function startCountdown() {
    clearInterval(interval);
    var seconds = parseInt(document.getElementById("text").value);
    targetTime = new Date(new Date().getTime() + (seconds * 1000))
    interval = setInterval(countdown, 1000);
    countdown();
}

function countdown() {
    var msLeft = targetTime - new Date();
    var secondsLeft = Math.floor(msLeft / 1000);
    displayTime.innerHTML = secondsLeft;
}  

</script>
</head>
<body>
    <input type="text" id="text">
    <button type="button" onclick="startCountdown()">Start</button>
    <span id="displayTime"></span>
</body>
</html>

score 0 · Answer 4 · answered Nov 06 '19 at 07:56

Here is my take on this

function timerCountdown() {
        var displayTime = document.getElementById("element");
        var timeleft = parseInt(displayTime.innerHTML);
        timeleft--;
        if(timeleft <= 0){
            clearInterval(MyInterval);
        }
        displayTime.innerHTML = timeleft;
        
}
var MyInterval = setInterval(function(){
timerCountdown();
} ,1000);

<span id="element">10</span>

Counter for countdown timer isn't working

4 Answers4