Home  >  Q&A  >  body text

SpeedCubing stopwatch in JS

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.

P粉014293738P粉014293738425 days ago604

reply all(1)I'll reply

  • P粉762730205

    P粉7627302052023-09-15 00:51:03

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

    reply
    0
  • Cancelreply