开发秒表时start与stop按钮无法互相切换该如何解决？

核心问题原因 #

代码存在两处语法错误导致stop功能失效：

• 第一处：startStop函数中，启动秒表时给status赋值用了冒号:而非赋值运算符=，原代码status:"started"没有实际修改变量值，status始终保持stopped状态，所以第二次点击永远无法进入stop逻辑分支。
• 第二处：stopWatch函数中处理分钟显示的分支存在变量拼写错误，displayMinutess = minutes多写了一个字母s，会导致分钟数大于等于10时显示异常，建议同步修复。

修复后的JS完整代码 #

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

// 定义展示用的时间变量
let displaySeconds = 0
let displayMinutes = 0
let displayHours = 0

// 存储定时器实例
let interval = null

// 存储秒表运行状态
let status = "stopped"

// 秒表计时逻辑
function stopWatch() {
    seconds++;

    // 时间进位逻辑
    if (seconds / 60 === 1){
        seconds = 0;
        minutes++;

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

    // 个位数补前导零
    if(seconds < 10){
        displaySeconds = "0" + seconds.toString()
    }else{
        displaySeconds = seconds
    }

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

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

    // 更新页面显示
    document.getElementById('display').innerHTML = displayHours + ':' + displayMinutes + ":" + displaySeconds
}

// 启停控制逻辑
function startStop(){
    if(status === "stopped"){
        interval = window.setInterval(stopWatch, 1000)
        document.getElementById('startStop').innerHTML = "stop"
        status = "started"
    }
    else{
        window.clearInterval(interval)
        document.getElementById('startStop').innerHTML = "start"
        status = "stopped"
    }
}

HTML代码不需要修改，替换JS文件内容后即可正常实现启停切换功能。

内容的提问来源于stack exchange，提问作者Ashley