JavaScript计数器开发遇错：点击计数正常但重置功能失效求助

代码里的核心问题： #

• 你在HTML按钮的onClick里传了plus和reset，但代码里根本没定义这两个变量，导致函数里的判断完全失效，累加和重置逻辑都跑不起来。
• 重置逻辑就算触发了，也只把count改成0，没同步更新页面上的数字显示。
• JS里绑定事件用了button.onClick，正确的写法是小写的onclick；而且你同时用了HTML属性和JS绑定，属于重复绑定，容易出问题。

修复后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <title>CoderslangJS click counter</title>
</head>
<body>
<h3>CLICKS:</h3>
<p id="clicks">0</p>
<button type="button" id="incrementCounterButton">Click me</button>
<button type="button" id="resetCounterButton">Reset</button>

<script>
    const countDisplay = document.getElementById('clicks');
    const incrementBtn = document.getElementById('incrementCounterButton');
    const resetBtn = document.getElementById('resetCounterButton');
    let count = 0;

    // 累加逻辑
    function incrementCount() {
        count++;
        countDisplay.textContent = count;
    }

    // 重置逻辑
    function resetCount() {
        count = 0;
        countDisplay.textContent = count;
    }

    // 绑定事件
    incrementBtn.addEventListener('click', incrementCount);
    resetBtn.addEventListener('click', resetCount);
</script>
</body>
</html>

改动说明： #

• 移除了HTML里的onClick属性，改用addEventListener绑定事件，逻辑更清晰，避免冲突。
• 把累加和重置拆成独立函数，代码更易读。
• 重置时同步更新页面的数字显示。
• 变量命名更语义化，比如countDisplay、incrementBtn，方便维护。

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