Why doesn't my timer function count down?

Question

I am working on a personal project to create a pomodoro clock. I am starting off by trying to create a 25 minute countdown timer with a start and stop button. I have included a timer function that should count down my variable every 1000 milliseconds but it does not function. Here is my HTML:

Pomodoro Clock

<div id="timer" class="circle">Timer</div>
<button onclick="setTimeout(timer, 1000);">Start</button>
<button>Stop</button>

Javascript:

var i = 25;
document.getElementById("timer").innerHTML = i;

function timer(){ 
  setInterval(function(){i--}, 1000);
}

I am guessing it may have something to do with my timer function?

Answer 1

document.getElementById("timer").innerHTML = i;

Here the current value of i is being assigned to innerHTML. It's not being passed by reference.

The only data types in JavaScript that are passed by reference are Objects (Plain objects, functions, arrays, etc).

You need to assign the new value of i to innerHTML on every iteration of your interval:

setInterval(function(){
    i--;
    document.getElementById("timer").innerHTML = i;
}, 1000);

Answer 2

You need to update the innerHTML inside the setInterval() callback. Also you can clear the interval using clearInterval(). I just removed the setTimeout() , since setInterval() starts after the delay.

var i = 25,
  ele = document.getElementById("timer");
ele.innerHTML = i, inter;

function timer() {
  inter = setInterval(function() {
    ele.innerHTML = --i;
    if (i == 0) clearInterval(inter);
  }, 1000);
}

function stop() {
  clearInterval(inter);
}

<div id="timer" class="circle">Timer</div>
<button onclick="timer()">Start</button>
<button onclick="stop()">Stop</button>

Answer 3

Try this

var i = 25;

function timer(){ 
  setInterval(function(){
    i--;
    document.getElementById("timer").innerHTML = i;
  }, 1000);
}

Answer 4

You only set the innerHTML one time, at the start of the script. You need to do it each time your function runs.

document.getElementById("timer").innerHTML = i;

function timer(){
    setInterval(function(){
        i--;
        document.getElementById("timer").innerHTML = i;
    }, 1000);
}

Answer 5

You need to update the div inside the interval function.

var i = 25;
var timerDiv = document.getElementById("timer");

function timer() {
  setInterval(function() {
    timerDiv.innerHTML = i--;
  }, 1000);
}

.circle {
  background-color: red;
  color: white;
  border-radius: 20px;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  line-height: 40px;
}

<div id="timer" class="circle">Timer</div>
<button onclick="setTimeout(timer, 1000);">Start</button>
<button>Stop</button>