Timer in HTML not showing after first countdown

Question

Been working on this version of whack-a-mole for a while. Current version here and code is below.

Issue is with the startGame() function closer to the bottom. It works in the sense when i console.log the timer each time i press the button it counts down from 10 correctly. However after the first time it tries to say 'Times Up' and the current timer number and the same time.

What am I missing?

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Whack A Mole!</title> <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> </head> <body> <h1>Whack-a-mole! <span class="score">0</span></h1> <button class=button onClick="startGame()">Start!</button> <div class="game"> <div class="hole hole1"> <div class="mole"></div> </div> <div class="hole hole2"> <div class="mole"></div> </div> <div class="hole hole3"> <div class="mole"></div> </div> <div class="hole hole4"> <div class="mole"></div> </div> <div class="hole hole5"> <div class="mole"></div> </div> <div class="hole hole6"> <div class="mole"></div> </div> </div> <h2 class="timer"> Countdown: <span id="countDown"> 10</span></h2> <script> const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); const countDown = document.getElementById('countDown'); let lastHole; let score = 0; function randomTime(min, max) { return Math.round(Math.random() * (max - min) + min); } function randomHole(holes) { const idx = Math.floor(Math.random() * holes.length); const hole = holes[idx]; if (hole === lastHole) { return randomHole(holes); } lastHole = hole return hole; } function peep() { const time = randomTime(200, 1000); const hole = randomHole(holes); hole.classList.add('up'); setTimeout(() => { hole.classList.remove('up'); if (!timeUp) peep(); }, time); } function startGame() { scoreBoard.innerHTML = 0; timeUp = false; score = 0; let timer = 10; peep(); setTimeout(() => timeUp = true, 10000) var timeOut = setInterval(function () { timer--; if (timer > 0) { countDown.classList.remove('timeUp') countDown.innerHTML = timer; } else { countDown.innerHTML = "Times up!"; countDown.classList.add('timeUp'); return; } console.log(timer); }, 1000); } function bonk(e) { if (!e.isTrusted) return; //cheater without clicking score++; this.classList.remove('up'); scoreBoard.textContent = score; } moles.forEach(mole => mole.addEventListener('click', bonk)); </script> </body> </html>

Answer 1

Each time you call startGame() you're creating another interval, but you never remove the previous one. You end up with multiple intervals running simultaneously - some of their timer's are complete, whereas the most recent one is not, so they end up conflicting and changing the text back and forth.

Simply replace your return with clearInterval(timeOut) :

var timeOut = setInterval(function () {
  timer--;
  if (timer > 0) {
    countDown.classList.remove('timeUp')
    countDown.innerHTML = timer;
  } else {
    countDown.innerHTML = "Times up!";
    countDown.classList.add('timeUp');
    clearInterval(timeOut);
  }
  console.log(timer);
, 1000);

Full Code:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Whack A Mole!</title> <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> </head> <body> <h1>Whack-a-mole! <span class="score">0</span></h1> <button class=button onClick="startGame()">Start!</button> <div class="game"> <div class="hole hole1"> <div class="mole"></div> </div> <div class="hole hole2"> <div class="mole"></div> </div> <div class="hole hole3"> <div class="mole"></div> </div> <div class="hole hole4"> <div class="mole"></div> </div> <div class="hole hole5"> <div class="mole"></div> </div> <div class="hole hole6"> <div class="mole"></div> </div> </div> <h2 class="timer"> Countdown: <span id="countDown"> 10</span></h2> <script> const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); const countDown = document.getElementById('countDown'); let lastHole; let score = 0; function randomTime(min, max) { return Math.round(Math.random() * (max - min) + min); } function randomHole(holes) { const idx = Math.floor(Math.random() * holes.length); const hole = holes[idx]; if (hole === lastHole) { return randomHole(holes); } lastHole = hole return hole; } function peep() { const time = randomTime(200, 1000); const hole = randomHole(holes); hole.classList.add('up'); setTimeout(() => { hole.classList.remove('up'); if (!timeUp) peep(); }, time); } function startGame() { scoreBoard.innerHTML = 0; timeUp = false; score = 0; let timer = 10; peep(); setTimeout(() => timeUp = true, 10000) var timeOut = setInterval(function() { timer--; if (timer > 0) { countDown.classList.remove('timeUp') countDown.innerHTML = timer; } else { countDown.innerHTML = "Times up!"; countDown.classList.add('timeUp'); clearInterval(timeOut); } console.log(timer); }, 1000); } function bonk(e) { if (!e.isTrusted) return; //cheater without clicking score++; this.classList.remove('up'); scoreBoard.textContent = score; } moles.forEach(mole => mole.addEventListener('click', bonk)); </script> </body> </html>

Timer in HTML not showing after first countdown

Question

1 answers

solution1
4 ACCPTED 2018-12-14 05:04:06

Timer in HTML not showing after first countdown

Question

1 answers

solution1 4 ACCPTED 2018-12-14 05:04:06

solution1
4 ACCPTED 2018-12-14 05:04:06