JavaScript计算器点击AC按钮时clear()与updateDisplay()函数失效问题

问题根因 #

你的clear方法仅修改了DOM元素的显示内容，没有重置Calculator实例上存储实际运算值的currentOperand、previousOperand两个核心状态变量。界面清空只是临时的视觉效果，底层数据还保留着之前输入的3和4，后续输入数字或者触发display更新时，就会读取旧数据重新渲染，导致数值复现。

你后续添加的updateDisplay调用反而会加剧问题：updateDisplay会把currentOperand、previousOperand的旧值重新赋值给DOM的innerHTML，相当于刚手动清空的界面又被旧数据覆盖。

修复方案 #

修改clear方法，优先重置实例的状态变量，再通过updateDisplay同步界面即可：

clear() {
    // 重置底层存储的所有运算状态
    this.currentOperand = ''
    this.previousOperand = ''
    this.operation = undefined
    // 统一通过updateDisplay同步界面，不需要手动修改innerHTML
    this.updateDisplay()
}

对应的AC按钮点击事件可以简化，不需要额外调用updateDisplay：

allClearButton.addEventListener('click', () => {
    calculator.clear()
})

额外排查点 #

• 检查数字键的输入逻辑：确认数字拼接是读取this.currentOperand处理，而不是直接读取DOM的innerHTML，避免数据和视图不同步
• 所有修改运算值的操作，都遵循「先改实例状态变量，再调用updateDisplay同步界面」的逻辑，不要直接操作DOM修改显示内容，保持数据驱动视图的一致性

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