How to create a countdown timer that countdown html text 60 to 0

Question

Im working on a larger project but I'm trying out a simpler version of countdown timer with only seconds and not minutes. Code below description

So basically I have 60 seconds in html(id="initial"). I have button with a function called timer. In javascript i get the value in the h3 tag, by using parseint on the variable and of course innerHTML to get the text inside the tag itself.

Then I create a new variable called newTime and basically set it to newTime = initial--; Then I update the initial with innerHTMl, like initial.inneHTML = newTime. It doesnt work, however. Anyways heres the code:

 setInterval(setUp, 1000); function setUp(){ var initial = parseInt(document.getElementById("initial").innerHTML); var newTime = initial--; initial.innerHTML = newTime; }

 <button onclick="setUp()">Activate timer</button> <h3 id="initial">60</h3>

Answer 1

You are firing setUp function, not the Interval itself. Assign the interval to a variable and pass that to onclick.

Answer 2

There are two problems:

1. the interval handling, but that's covered in another post

2. The variable initial is assigned integer and then treated as if it was an element.

A solution for problem 2:

var initialElement = parseInt(document.getElementById("initial").innerHTML);
function setUp(){

    var initialValue = parseInt(initialElement.innerHTML);
    
    var newTime = initialValue--;
    
    initialElement.innerHTML = newTime;
}

I really do recommend looking up the element just once, instead of once per interval

Answer 3

You are trying to set the innerHTML of an integer.

var initial = document.getElementById("initial");
var newTime = parseInt(initial.innerHTML)-1;
initial.innerHTML = newTime;

Also, you should run setInterval(setUp, 1000); on click and save the result:

<button onclick="myTimer=setInterval(setUp, 1000);">Activate timer</button>

You need a way to stop the timer as well:

if (newTime == 0)
    clearTimeout(myTimer);

Answer 4

There are some issues, I'll try to address them one by one.

1. Currently, the setInterval(setUp, 1000); is called before the button, so the timer would start instant, lets move that inside the function. We'll pass an anonymous function to the setInterval with our code to count down
2. You're saving the .innerHTML to the variable initial , however, you're trying to use the same variable to set the .innerHTML again. Let's separate those into 2 variables, the element and the current value in each iteration. The element can be placed outside the setInterval since the reference to the <h3> won't change, there's no need to keep calling getElementById
3. value--; doesn't return anything, it increments the current variable itself, lets remove the extra variable
4. We're not stopping the setInterval when we reach 0 , let's fix that too.

Then, we end up with something like this:

 function setUp(){ // Save the h3 element var element = document.getElementById("initial"); // Create setInterval, save to variable to clear later var timer = setInterval(function() { // Current element value var value = element.innerHTML; // Decrease value--; // Set value element.innerHTML = value; // Clear if we're at 0 if (value === 0) { clearTimeout(timer); } }, 1000); }

 <button onclick="setUp()">Activate timer</button> <h3 id="initial">60</h3>

Answer 5

I would modify the javascript code:

function setUp(){

    var initial = parseInt(document.getElementById("initial").innerHTML);
    
    var newTime = initial--;
    
    initial.innerHTML = newTime;
}

function trigger(){
    setInterval(setUp, 1000);
}

And on your html:

<button onclick="trigger()">Activate timer</button>
<h3 id="initial">60</h3>

The idea is to make the button only trigger the interval creation, and making setUp execute each second.

Answer 6

The count down is best done with a setInterval call that is stopped by a clearInterval call:

 document.querySelector('button').onclick=()=>{ const inp=document.querySelector('input') let n=inp.value-1; const handle=setInterval(function(){ inp.value=n; if (;n--) clearInterval(handle), },1000) }

 <button>start</button> <input value="10">