CODEWITHSUNDEEP
javascriptstopwatch
Kisho
Kisho

Reputation: 327

Having issue resetting JS stopwatch

I made a little typing game that reveals some random text and you have to type the same in, so that you can test your typing speed. the users has the ability to play again and again, the issue is that when the user types play again, the stopwatch does not begin as it did the first time.

Can anyone help me with making the stopwatch restart everytime the user clicks on the play again button?

[ full code is here] (https://jsfiddle.net/kisho/ncbxd9o4/#&togetherjs=qD5bT8vLiw)

js portion- 

const textDisplay = document.querySelector('#text-display');
const input = document.querySelector('#input');
const btn = document.querySelector('#btn');
const textBox = document.querySelector('#text-box');
const countdown = document.querySelector('#countdown');
const stopwatch = document.querySelector('#stopwatch');
const successMessege = document.querySelector('#success-messege');
const stopwatchTime = document.querySelector('#stopwatch-time');

btn.addEventListener('click', runGame);

function runGame() {
 if ((btn.innerText = 'Play again')) {
     playAgain();
     fetchQuote();
     countownTimer();
     confirmQuote();
 } else {
     fetchQuote();
     countownTimer();
     confirmQuote();
 }
}

function fetchQuote() {
 fetch('https://api.quotable.io/random')
     .then((res) => {
         return res.json();
     })
     .then((data) => {
         textDisplay.innerText = data.content;
     });
}

function countownTimer() {

if (timer !== undefined) {
     clearInterval(timer);
 }
 var timeleft = 2;
 var downloadTimer = setInterval(function() {
     if (timeleft <= 0) {
         clearInterval(downloadTimer);
         document.getElementById('countdown').innerHTML = 'Start Typing!';
         input.classList.remove('displayNone');
         runningStopwatch.classList.remove('displayNone');
         begin();
     } else {
         document.getElementById('countdown').innerHTML = timeleft + ' seconds remaining';
     }
     timeleft -= 1;
 }, 1000);
}

function confirmQuote() {
 if ((countdown.innerHTML = 'Start typing!')) {
     input.addEventListener('keyup', function(event) {
         if (event.keyCode === 13) {
             if (textDisplay.innerText === input.value) {
                 btn.innerText = 'Play again';
                 // textBox.classList.add('displayNone');
                 hold();
             } else successMessege.innerText = 'Missed something there, try again!!';
         }
     });
 }
}

function playAgain() {
 textBox.classList.remove('displayNone');
 input.classList.add('displayNone');
 input;
 input.value = '';
 successMessege.innerText = '';
}

let ms = 0,
 s = 0,
 m = 0;
let timer;

let runningStopwatch = document.querySelector('.running-stopwatch');

function begin() {
 timer = setInterval(run, 10);
}

function run() {
 runningStopwatch.textContent =
     (m < 10 ? '0' + m : m) + ': ' + (s < 10 ? '0' + s : s) + ': ' + (ms < 10 ? '0' + ms : ms);
 ms++;
 if (ms == 100) {
     ms = 0;
     s++;
 }
 if (s == 60) {
     s = 0;
     m++;
 }
}

function hold() {
 clearInterval(timer);
 successMessege.innerText = `Nice job! You just typed in x seconds!`;
}

function stop() {
 (ms = 0), (s = 0), (m = 0);
 runningStopwatch.textContent =
     (m < 10 ? '0' + m : m) + ': ' + (s < 10 ? '0' + s : s) + ': ' + (ms < 10 ? '0' + ms : ms);
}

Upvotes: 0

Views: 57

Answers (1)

pal
pal

Reputation: 26

You are not handling the clearInterval correctly.

You are clearing the interval only if one ends the game successfully. My solution would be:

When calling the countownTimer() function, the first thing you should do, is to check if the interval timer is still running. 

function countownTimer() {
    if (timer !== undefined) {
        clearInterval(timer);
    }
    // [...]
}

The next thing would be, to start the interval every time begin() gets called.

function begin() {
    timer = setInterval(run, 10);
}

Upvotes: 1

Related Questions