Why can’t i switch between my "stop" and "start" buttons?

i'm making a stopwatch, and my codes is supposed to make the "start" button turn to "stop" button whenever i click on the "start" button and the opposite. My start button seems to work but when i try to switch it to "stop" it doesn't work...i don't know what is ưởng, anybody can help me? Thank you so much!

This is my js:

let hours = 0
let seconds = 0
let minutes = 0

//define var to hold 'display' value
    let displaySeconds = 0
    let displayMinutes = 0
    let displayHours = 0

//var to hold "setInterval" function
    let interval = null

//Define var to hold stopwatch status

    let status = "stopped"

//functions(logic to determine when to increment values,...)

function stopWatch() {
    seconds++;

    //logic to determine when to flip to next next value

    if (seconds / 60 ===1){
        seconds = 0;
        minutes++;

        if(minutes/ 60 ===1){
            minutes = 0;
            hours++;
        }

    }

    //if second, minute, hrs are only one digits, add a leaing 0 to the value
    if(seconds < 10){
        displaySeconds = "0" + seconds.toString()
    }else{
        displaySeconds = seconds
    }

    if(minutes < 10){
        displayMinutes = "0" + minutes.toString()
    }else{
        displayMinutess = minutes
    }

    if(hours < 10){
        displayHours = "0" + hours.toString()
    }else{
        displayHours = hours
    }


    //display updated time values to user
    document.getElementById('display').innerHTML = displayHours + ':' + displayMinutes + ":" + displaySeconds
}



function startStop(){
    if(status === "stopped"){
        //start the stopwatch by calling setInterval function
        interval = window.setInterval(stopWatch, 1000)
        document.getElementById('startStop').innerHTML = "stop"
        status:"started"
    }
    else{
        window.clearInterval(interval)//stop interval from running
        document.getElementById('startStop').innerHTML = "start"
        status = "stopped"
    }
}

This is my html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet"  href="style.css">
</head>
<body>
    <div class="container">
        <div id="display">
            00:00:00
        </div>
        <div class="button">
            <button id="startStop" onclick="startStop()">Start</button> 
            <button id="reset">Reset</button>

        </div>

    </div>


    <script src="index.js"></script>
</body>
</html>


Read more here: https://stackoverflow.com/questions/68467328/why-cant-i-switch-between-my-stop-and-start-buttons

Content Attribution

This content was originally published by Nương Đàm Thị at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: