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;
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>