CODEWITHSUNDEEP
javascripttimer
Eric Park
Eric Park

Reputation: 502

Why doesn't my timer function count down?

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?

Upvotes: 1

Views: 109

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115212

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>

Upvotes: 2

wolfhammer
wolfhammer

Reputation: 2661

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>

Upvotes: 0

nderscore
nderscore

Reputation: 4251

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);

Upvotes: 2

elixenide
elixenide

Reputation: 44823

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);
}

Upvotes: 0

Jason Byrne
Jason Byrne

Reputation: 1619

Try this

var i = 25;

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

Upvotes: 1

Related Questions