为什么我不能在 "stop" 和 "start" 按钮之间切换？

Question

我正在制作一个秒表，我的代码应该让“开始”按钮在我点击“开始”按钮时变成“停止”按钮，反之亦然。我的开始按钮似乎可以工作，但当我尝试将其切换为“停止”时，它不起作用。我不知道出了什么问题，有人可以帮助我吗？非常感谢！

这是我的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"
    }
}

这是我的 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>

Answer 1

因为你用的是status: "started"而不是status = "started"，你在if块

里面写了下面的语句

if(status === "stopped"){
    interval = window.setInterval(stopWatch, 1000)
    document.getElementById('startStop').innerHTML = "stop"
    status = "started"
}

为什么我不能在 "stop" 和 "start" 按钮之间切换？

Why can't I switch between my "stop" and "start" buttons?

javascript

setinterval

status

clearinterval