CODEWITHSUNDEEP
javascripttimer
ttran4040
ttran4040

Reputation: 170

JS Timer is not starting when button pushed

I have been looking at this for a few hours and cant seem to see why my code isnt starting the timer countdown when the button is pressed. Any help would be much appreciated, thanks!

HTML

<div id="timerHours">00</div>
<div id="timerMins">00</div>
<div id="timerSecs">00</div>
<input type="button" value="Start" onclick="startTimer()"/>

JavaScript

var t;
var timerDefault = new Date();
timerDefault.setHours(0, 0, 0);

function setTimer(){
    var element = document.getElementById("timerHours");
    hours = parseFloat(element.innerHTML);
    element = document.getElementById("timerMins");
    minutes = parseFloat(element.innerHTML);
    element = document.getElementById("timerSecs");
    seconds = parseFloat(element.innerHTML);
    timerDefault.setHours(hours, minutes, seconds);
}

function startTimer() {
    setTimer();
    var h = timerDefault.getHours();
    var m = timerDefault.getMinutes();
    var s = timerDefault.getSeconds();
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    document.getElementById("timerHours").innerHTML = h;
    document.getElementById("timerMins").innerHTML = m;
    document.getElementById("timerSecs").innerHTML = s;
    timerDefault.setSeconds(timerDefault.getSeconds() - 1);
    if (h == 0 && m == 0 && s == 0) clearTimeout(t)
    t = setTimeout(startTimer, 1000);
}

Upvotes: 0

Views: 142

Answers (2)

Uncle Iroh
Uncle Iroh

Reputation: 6045

With a couple changes to your code you can see it count down a bit.

<div id="timerHours">00</div>
<div id="timerMins">00</div>
<div id="timerSecs">50</div>
<input type="button" value="Start" onclick="startTimer()"/>


var t;
var timerDefault = new Date();
timerDefault.setHours(0, 0, 0);

function setTimer(){
    var element = document.getElementById("timerHours");
    hours = parseFloat(element.innerHTML);
    element = document.getElementById("timerMins");
    minutes = parseFloat(element.innerHTML);
    element = document.getElementById("timerSecs");
    seconds = parseFloat(element.innerHTML);
    timerDefault.setHours(hours, minutes, seconds);
}

function startTimer() {
    setTimer();
    timerDefault.setSeconds(timerDefault.getSeconds() - 1);
    var h = timerDefault.getHours();
    var m = timerDefault.getMinutes();
    var s = timerDefault.getSeconds();
    console.log("Hi! " + h + " " + m + " " + s);
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    document.getElementById("timerHours").innerHTML = h;
    document.getElementById("timerMins").innerHTML = m;
    document.getElementById("timerSecs").innerHTML = s;
    if (h == 0 && m == 0 && s == 0) clearTimeout(t)
    t = setTimeout(startTimer, 1000);
}

Upvotes: 0

Pointy
Pointy

Reputation: 413712

Your "startTimer()" routine always calls "setTimer()", which (re-)initializes that Date object based on the contents of the HTML elements. The routine then backs the seconds down by 1, but it never updates the HTML. Thus, the next time the timer goes off, the Date instance ("timerDefault") is reset to 00:00:00.

Upvotes: 1

Related Questions