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