-2

My timer starts when page is opened versus when clicking the Start button. I have spent hours trying to resolve the problem based on the suggestions I read in this forum: Make countdown start after button is clicked. Thank you in advance for your assistance.

My Code:

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }


    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();


/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

3 Answers3

4

You need to remove the call to timer():

function timer() {
    t = setTimeout(add, 1000);
}
//timer();//this causes the timer to start one the page is loaded

Also there is a missing brace } in your code here:

if (seconds >= 60) {
    seconds = 0;
    minutes++;
    //missing } here

See working snippet

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        }
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }


    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
//timer();


/* Start button */
start.onclick = function(){
    start.disabled = true;
    timer();
};

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
    start.disabled = false;
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}
<h1></h1>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="clear">Clear</button>

Implementation using setInterval (this way you can avoid the recursive call to timer() in your add function):

var h1 = document.getElementsByTagName('h1')[0],
        start = document.getElementById('start'),
        stop = document.getElementById('stop'),
        clear = document.getElementById('clear'),
        seconds = 0, minutes = 0, hours = 0,
        t;

    function add() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            }
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }


        h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
    }
    function timer() {
        t = setInterval(add, 1000);
    }
    //timer();


    /* Start button */
    start.onclick = function(){
        start.disabled = true;
        timer();
    };

    /* Stop button */
    stop.onclick = function() {
        clearInterval(t)
        start.disabled = false;
    }

    /* Clear button */
    clear.onclick = function() {
        h1.textContent = "00:00:00";
        seconds = 0; minutes = 0; hours = 0;
    }
    <h1></h1>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="clear">Clear</button>
Ayo K
  • 1,719
  • 2
  • 22
  • 34
0

Remove timer() underneath function timer() {. If that doesn't help, try removing timer() in add() as well.

Brent Meeusen
  • 179
  • 1
  • 11
0

You call timer() in your code, before the start button is pressed.

timer();

Remove that line from your code and test it; the timer shouldn't begin on page load once you do that.

freginold
  • 3,946
  • 3
  • 13
  • 28