How to make a button reset a countdown timer?

Question

I am making a click speed game that counts how many times you can click a button in 5 seconds. The problem I am having is I cannot get the timer to reset back to 5 without it counting down on its own. I am trying to make it so when you click the "restart?" button it resets the timer back to 5 and stays at 5 until the "click to start" button is clicked just how it is when you open the page for the first time.

This is one of my first projects using Javascript on my own so please forgive the bad code. lol.

const button = document.getElementById('button');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');
let timer = document.getElementById('safeTimerDisplay');
let clicks = 1;
const score = document.getElementById('display');
let counter = 5;
//timer button
const timerButton = button2.addEventListener('click', onclick => {
  button2.style.display = 'none';
});
//button counter
const onClickButton = button.onclick = function() {
  button.textContent = (`${clicks++}`)
}
//button click starts timer
$("#button2").click(function restart(timer) {
  setInterval(function() {
    counter--;
    if (counter >= 0) {
      p = document.getElementById("safeTimerDisplay");
      p.innerHTML = counter;
    }
    if (counter === 0) {
      button3.style.display = 'block';
      button.disabled = true;
    }
  }, 1000);
  clearInterval(counter);
});
//restart button
const restartButton = button3.addEventListener('click', onclick => {
  button3.style.display = 'none';
  //start button resdisplay
  button2.style.display = 'block';
  clicks = 1;
  //timer reset
  //counter button back to zero
  button.textContent = (`${clicks++}`)
  button.disabled = false;
  // everything else                                
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <h1>Speed Test</h1>
  <p id="safeTimerDisplay">5</p>
  <p class="display" id="display">score:</p>
</div>
<div class="button-container">
  <button class="button2" id="button2">Click to start</button>
  <button class="button" id="button">1</button>
  <button class="button3" id="button3">restart?</button>
</div>

Why mix onclick and addEventListener? `const onClickButton = button.onclick = function() { button.textContent = (\`${clicks++}\`) }` could be `button.addEventListener("click",function() { this.textContent = ++clicks });` - you do not need to save the result of the adding of the event listener either — mplungjan, Jul 08 '21 at 05:45
Is there a benefit to doing it this way besides it being cleaner? Honest question. I am trying to learn as much as I can — turntlane, Jul 08 '21 at 05:56
[easily found](https://www.google.com/search?q=onclick+vs+addeventlistener+site:stackoverflow.com) for example https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick - onclick will be overwritten if you do it again — mplungjan, Jul 08 '21 at 05:59

score 0 · Accepted Answer · answered Jul 08 '21 at 05:30

You have to set the counter back to 5 on restart and also update the DOM. And you need to clear interval once the counter reaches 0.

const button = document.getElementById('button');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');
let timer = document.getElementById('safeTimerDisplay');
let clicks = 1;
const score = document.getElementById('display');
let counter = 5;

//timer button
const timerButton = button2.addEventListener('click', onclick => {
  button2.style.display = 'none';
});


//button counter
const onClickButton = button.onclick = function() {
  button.textContent = (`${clicks++}`)
}

//button click starts timer
$("#button2").click(function restart(timer) {
  var interval = setInterval(function() {
    counter--;
    if (counter >= 0) {
      var p = document.getElementById("safeTimerDisplay");
      p.innerHTML = counter;
    }
    if (counter === 0) {
      button3.style.display = 'block';
      button.disabled = true;
      clearInterval(interval);
    }

  }, 1000);

});




//restart button
const restartButton = button3.addEventListener('click', onclick => {
  button3.style.display = 'none';
  //start button resdisplay
  button2.style.display = 'block';
  clicks = 1;
    counter = 5
  var p = document.getElementById("safeTimerDisplay");
  p.innerHTML = counter;
  //timer reset

  //counter button back to zero
  button.textContent = (`${clicks++}`)
  button.disabled = false;
  // everything else                                

});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="header">
  <h1>Speed Test</h1>
  <p id="safeTimerDisplay">5</p>
  <p class="display" id="display">score:</p>
</div>
<div class="button-container">
  <button class="button2" id="button2">Click to start</button>
  <button class="button" id="button">1</button>
  <button class="button3" id="button3">restart?</button>
</div>

Worked! Thank you. I was close on my own attempts, I just could not get it to stay at 5 without counting down. I appreciate your fast response. — turntlane, Jul 08 '21 at 05:47

How to make a button reset a countdown timer?

1 Answers1