A timer is built into the code block. Right now the timer starts/stops via the button, but I need it to run when the space button is released, and I need it to stop when the space button is pressed. I've been trying to solve this problem for about two days now and can't seem to find a solution. Every time I try to stop the timer, when I release the space button, the timer starts again.
let startDate;
let timeoutID = 0;
let time;
let started = false;
let timerRunOut = false;
function start(){
if(!started){
startDate = new Date();
startTimer();
started = true;
}
}
function stop(){
if(started){
clearTimeout(timeoutID);
started = false;
}
}
function startTimer () {
let current = new Date();
time = (current - startDate);
let timeMS = time;
let ms = timeMS % 1000;
timeMS = (timeMS - ms) / 1000;
let seconds = timeMS % 60;
timeMS = (timeMS - seconds) / 60;
let mins = timeMS % 60;
if(seconds < 10){
document.getElementById("seconds").innerText = "0" + seconds;
}else{
document.getElementById("seconds").innerText = seconds;
}
if(mins > 0 && mins < 10){
document.getElementById("minutes").innerText = "0" + mins + ":";
}else if(mins > 0){
document.getElementById("minutes").innerText = mins + ":";
}else{
document.getElementById("minutes").innerText = "";
}
if(ms < 10){
document.getElementById("tens").innerText = "00" + ms;
}
else if(ms < 100){
document.getElementById("tens").innerText = "0" + ms;
}else{
document.getElementById("tens").innerText = ms;
}
timeoutID = setTimeout(startTimer, 0);
}
I've tried adding event listeners and adding conditions but nothing works, when the timer stops it always starts again when I release the space button.
I found the solution, I need to give Andre some credit, he helped me solve the problem this came out.
let spaceUp = 0; function startHandler(event){ if(event.code === "Space" && spaceUp < 1){ start(); spaceUp ++; document.addEventListener("keydown", stopHandler); document.removeEventListener("keyup", startHandler); }else if(spaceUp == 1){ spaceUp = 0; } document.getElementById("timer").style.color = "black"; } function stopHandler(event){ if(event.code === "Space"){ stop(); document.removeEventListener("keydown", stopHandler); document.getElementById("timer").style.color = "red"; document.addEventListener("keyup", startHandler); } } document.addEventListener("keyup", startHandler); document.addEventListener("keydown", function(e){ if(e.code === "Space" && !started){ document.getElementById("timer").style.color = "green"; } })