1-Min Countdown Javascript

Question

I'm attempting to build a typing test that begins counting down when the user presses a key in the text area. I thought an if-else loop would help display and start the 1-minute countdown timer in my HTML but that's not the case.

Please explain to me what I'm doing wrong & how to correct my code.

HTML:

<div id="timer"></div>
<p>Text for typing test will go here.</p>
<textarea id="textarea" rows="14" cols="150" placeholder="Start typing here...">
</textarea>`

JS:

var seconds=1000 * 60; //1000 = 1 second in JS
var min = seconds * 60;
var textarea = document.getElementById("textarea").onkeypress = function() { 
    myFunction()
};
//When a key is pressed in the text area, update the timer using myFunction

function myFunction() {
   document.getElementById("timer").innerHTML = 
     if (seconds>=0) {
         seconds = seconds--;
     } else {
         clearInterval("timer");
         alert("You type X WPM");
     }
} //If seconds are equal or greater than 0, countdown until 1 minute has passed
//Else, clear the timer and alert user of how many words they type per minute

document.getElementById("timer").innerHTML="0:" + seconds;

you're calling clearInterval, but where do you setInterval? this will help: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval — manonthemat, Feb 09 '16 at 18:26
`document.getElementById("timer").innerHTML =` is invalid syntax; didn't you want to finish this line? What do you want to assign? — Chiru, Feb 09 '16 at 18:30
@manonthemat I'm assuming that my setInterval should read as follows: var aVar = setInterval (function() { myFunction()}, 1000); — Rasheeda Alexander, Feb 09 '16 at 18:49
@AdamBuchananSmith thanks for the correction, I've fixed the timing errors. — Rasheeda Alexander, Feb 09 '16 at 18:50

rrk · Answer 1 · 2016-02-09T18:49:50.190

There were lots syntax errors in your code. You need to use setInterval function to start the continuous call of your function. More importantly,

var seconds = 1000 * 60; //1000 = 1 second in JS
var min = seconds * 60;

These calculations were another problem.

1000 * 60 means 60 seconds, so seconds * 60 gives you 60 minutes.

Like one of the comments said, there are syntax errors all over the place.. You need to get more insight into coding using JavaScript.

var seconds = 1000 * 60; //1000 = 1 second in JS
var textarea = document.getElementById("textarea");
var timer;
textarea.addEventListener("keypress", myFunction)
//When a key is pressed in the text area, update the timer using myFunction

function myFunction() {
   textarea.removeEventListener("keypress", myFunction);
   if(seconds == 60000)
     timer = setInterval(myFunction, 1000)
   seconds -= 1000;
   document.getElementById("timer").innerHTML = '0:' + seconds/1000;
   if (seconds <= 0) {
       clearInterval(timer);
       alert("You type X WPM");
   }
} //If seconds are equal or greater than 0, countdown until 1 minute has passed
//Else, clear the timer and alert user of how many words they type per minute

document.getElementById("timer").innerHTML= "0:" + seconds/1000;

<div id="timer"></div>
<p>Text for typing test will go here.</p>
<textarea id="textarea" rows="14" cols="150" placeholder="Start typing here...">
</textarea>

I like how you handled the timer by recursively calling myFunction and removing the event listener. Good work — Unome, Feb 09 '16 at 18:48

score 5 · Accepted Answer · answered Feb 09 '16 at 18:51

There are some problems with your solution that I noticed.

1) You clearInterval, but you never setInterval

2) seconds = seconds--, does not do what you think it does because of order of operations in JavaScript.

I modified your JS and have a working solution in this codepen

JS:

var seconds=60;
var timer;
function myFunction() {
  if(seconds < 60) { // I want it to say 1:00, not 60
    document.getElementById("timer").innerHTML = seconds;
  }
  if (seconds >0 ) { // so it doesn't go to -1
     seconds--;
  } else {
     clearInterval(timer);
     alert("You type X WPM");
  }
}
document.getElementById("textarea").onkeypress = function() {
  if(!timer) {
    timer = window.setInterval(function() { 
      myFunction();
    }, 1000); // every second
  }
} 

document.getElementById("timer").innerHTML="1:00";

score 1 · Answer 3 · answered Feb 09 '16 at 18:49

I rewrite your code, i think that it ill attempt your needs:

Javascript:

var seconds = 0, stop = 60, counterStarted = false, counter;
function myFunction(){
if(counterStarted === false){
counterStarted = true;
counter = setInterval(function(){
    if(seconds <= stop){
    document.getElementById('timer').innerHTML = seconds;
    seconds++;
  }else{
 document.getElementById('textarea').setAttribute("disabled", "disabled");
        clearInterval(counter);
        counterStarted = false;
        seconds = 0;
      }
    },1000)
  }
}

HTML:

<div id="timer"></div>
  <p>
Text for typing test will go here.  </p>
<textarea id="textarea" rows="14" cols="150" placeholder="Start typing here..." onkeypress="myFunction()"></textarea>

JsFiddle Example

score 0 · Answer 4 · answered Feb 09 '16 at 18:42

I've put together a small solution for you:

JavaScript:

    var textarea = document.getElementById("textarea").onkeypress = function(){
        myFunction()
    }
    var totalTime = 10
    var currentTime = totalTime
    var firstTap = true
    var timer = null

    function myFunction() {
        if (firstTap == true){
            firstTap = false
            timer = setInterval(function(){
                currentTime--
                document.getElementById("timer").innerHTML = currentTime;
                if (currentTime < 0){
                    currentTime = totalTime
                    document.getElementById("timer").innerHTML = currentTime;
                    clearInterval(timer);
                    alert("You type X WPM");
                    firstTap = true
                }
            }, 1000)
        }
    }

    document.getElementById("timer").innerHTML = currentTime

The main thing I changed, was that you need to store your timer, and have the callback of your interval be updating your timer display, not the myFunction(). Think about it, as you had the code your "timer" div would only update when you typed. You want that to update no matter what the user is doing if its a timer.

I put some basic gating logic to detect whether its your first keystroke so you don't start the timer 1000 times, and I just reset it when the alert appears. I also stored the total time at the top and you can set it to whatever value you want. I tested with 10 seconds since I didn't want to wait a minute, but you can move it to whatever you want.

score 0 · Answer 5 · answered Feb 09 '16 at 18:48

I did this a completely different way since there were so many syntax errors and would not work correctly anyways, see fiddle: https://jsfiddle.net/rtza7nm0/

  var counter = 0;

  function startTimer(duration, display) {
    var timer = duration,
      minutes, seconds;
    setInterval(function() {
      minutes = parseInt(timer / 60, 10)
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.textContent = minutes + ":" + seconds;

      if (--timer < 0) {
        alert("You type " + counter + " WPM");
        timer = duration;
      }
    }, 1000);
  }

  function myFunction() {
    if (counter == 0) {
      var oneMinute = 60,
        display = document.querySelector('#timer');
      startTimer(oneMinute, display);
      counter++;
    } else {
      counter++;
    }
  };

1-Min Countdown Javascript

5 Answers5