Javascript cannot display countdown timer which also starts on button click

Question

I am creating a countdown timer and I managed to get the timer to display and countdown, but it starts automatically when the page loads. I would like to prevent this. I know how to add an event handler I just can't work out how to stop it loading automatically.

Edited as I forgot to copy in a a div with countdown as #id.

((d) => {
  let start = d.getElementById("start");
  let stop = d.getElementById("stop");
  let reset = d.getElementById("reset");

  let timerFormat = (s) => {
    return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
  };

  let counter;
  let startTime = 1500;

  timer = () => {
    startTime--;
    document.getElementById("countdown").innerHTML = timerFormat(startTime);
    if (startTime === 0) clearInterval(counter);
  };
  counter = setInterval(timer, 1000);

  startHandler = () => {
    let el = document.getElementById("start");
    el.addEventListener("click", counter);
  };

})(document);

<div id="countdown"></div>
<button class="btn" id="start">Start</button>
<button class="btn" id="stop">Stop</button>
<button class="btn" id="reset">Reset</button>

You don't have an element with an id="countdown" in your html body to put anything in. — Dshiz
– Dshiz, Commented Oct 26, 2020 at 15:49
counter = setInterval(timer, 1000); This line is starting the timer. When you call setInterval, the interval starts immediately. You don't want to init that until the button is clicked. — daddygames
– daddygames, Commented Oct 26, 2020 at 15:53
So I placed the setInterval inside the timer function, it starts on click when I called the timer function, but it is also now doubling each second — OHello
– OHello, Commented Oct 26, 2020 at 15:59

tovernaar123 · Accepted Answer · 2020-10-26 16:40:44Z

4

You simply have to adde event handlers to the buttons like so:

 start.onclick = ()=>{
        counter = setInterval(timer, 1000);
      }
      stop.onclick = () => {
        clearInterval(counter);
        counter =  undefined;
      }
      
      reset.onclick = ()=>{
        startTime = 1500;
        document.getElementById("countdown").innerHTML = timerFormat(startTime);
      }

live demo:

((d) => {
  let start = d.getElementById("start");
  let stop = d.getElementById("stop");
  let reset = d.getElementById("reset");

  let timerFormat = (s) => {
    return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
  };

  let counter;
  let startTime = 1500;

  timer = () => {
    startTime--;
    document.getElementById("countdown").innerHTML = timerFormat(startTime);
    if (startTime === 0) clearInterval(counter);
  };
  start.onclick = ()=>{
    counter = counter  || setInterval(timer, 1000);
  }
  stop.onclick = () => {
    clearInterval(counter);
    counter =  undefined;
  }
  
  reset.onclick = ()=>{
    startTime = 1500;
    document.getElementById("countdown").innerHTML = timerFormat(startTime);
  }

})(document);

<div id="countdown"></div>
<button class="btn" id="start">Start</button>
<button class="btn" id="stop">Stop</button>
<button class="btn" id="reset">Reset</button>

edited Oct 26, 2020 at 16:40

answered Oct 26, 2020 at 16:05

tovernaar123

3523 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

OHello Over a year ago

Thanks so much! I've been shuffling lines of code around for hours now with no results.

Alon Eitan Over a year ago

after clearInterval(counter); you should add this line counter = undefined; and replace counter = setInterval(timer, 1000); with counter = counter ? counter : setInterval(timer, 1000); to prevent using multiple intervals

daddygames Over a year ago

The stop button in your example here is not stopping the timer on the page.

tovernaar123 Over a year ago

@daddygames what do you mean it will stop removing more seconds?

daddygames Over a year ago

the example is working now. The stop button was not stopping the countdown for me when I made my previous comment.

Collectives™ on Stack Overflow

Javascript cannot display countdown timer which also starts on button click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related