我用JS编写的简易秒表无法运行，该如何排查问题？

问题说明 #

JS初学者参照教程开发简易秒表功能，教程提供代码可正常运行，自行编写的代码点击后无响应。

关联代码 #

JS代码（script.js） #

var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var buttonStart = document.getElementById("button-start");
var buttonStop = document.getElementById("button-stop");
var buttonReset = document.getElementById("button-reset");
var interval;

function startTimer() {
    tens++;

    if (tens < 9) {
        appendTens.innerHTML = "0" + tens;
    }
    if (tens > 9) {
        appendTens.innerHTML = tens;
    }
    if (tens > 99) {
        seconds++;
        appendSeconds.innerHTML = "0" + seconds;
        tens = 0;
        appendTens.innerHTML = "0" + 0;
    }
    if (seconds > 9) {
        appendSeconds.innerHTML = seconds;
    }
}

buttonStart.onclick = function() {
    interval = setInterval(startTimer, 10);
};

buttonStop.onclick = function() {
    clearInterval(interval);
};

buttonReset.onclick = function() {
    clearInterval(interval);
    tens = "00";
    seconds = "00";
    appendSeconds.innerHTML = seconds;
    appendTens.innerHTML = tens;
};

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StopWatch</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
    
        <p><span id="seconds ">00</span>: <span id="tens ">00</span></p>
        <button id="button-start">Start</button>
        <button id="button-stop">Stop</button>
        <button id="button-reset">Reset</button>


        <script src="script.js"></script>
    </div>

</body>

</html>

故障原因 #

你已经自行定位到了问题的核心原因，具体解析如下：
HTML代码中，展示秒和毫秒的两个span标签的id属性值末尾多了多余空格：

• id="seconds " 实际id值是带空格的seconds ，和JS里查询的seconds不匹配
• id="tens " 实际id值是带空格的tens ，和JS里查询的tens不匹配
  document.getElementById是严格匹配id值的，匹配不到对应DOM元素的情况下，后续对元素的内容修改操作全部无效，最终表现为秒表点击无反应。

修复方案 #

删除HTML中两个span标签id属性末尾的空格即可，修改后的对应代码行如下：

<p><span id="seconds">00</span>: <span id="tens">00</span></p>

可选优化（非强制） #

现有JS代码中遗漏了tens == 9的判断，当毫秒数到9的时候，界面会显示09还是9可以自行调整逻辑。

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