CODEWITHSUNDEEP
javascript
Cedric Woo
Cedric Woo

Reputation: 39

Counter for countdown timer isn't working

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.

Upvotes: 2

Views: 578

Answers (4)

kapitan
kapitan

Reputation: 2212

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()">

Upvotes: 2

George Dryser
George Dryser

Reputation: 322

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>

Upvotes: 0

EmKay
EmKay

Reputation: 1089

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>

Upvotes: 0

SQL Hacks
SQL Hacks

Reputation: 1332

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.

Upvotes: 0

Related Questions