HTML计算器点击运算符按钮后显示未重置问题求助

核心问题 #

点击运算符后显示区域没清空，本质是清空显示的代码没关联到运算符的点击动作。

你写的document.getElementsByClassName('up')[0].innerHTML = ""这段清空逻辑，是放在aClick函数的外层执行逻辑里，只会在aClick第一次运行时执行一次，和运算符按钮的点击操作完全无关。而你的运算符点击回调中，仅完成了存储第一个数字、记录运算符、移除数字按钮事件这三个操作，根本没有触发清空显示的步骤。

修复步骤 #

把清空显示的代码移到运算符按钮的点击回调内部，比如在获取完第一个数字a之后执行：

operatorButtons.forEach(button => {
    button.addEventListener('click', function(){
        a= parseInt(document.getElementsByClassName('up')[0].innerHTML)
        // 点击运算符时立即清空显示区域
        document.getElementsByClassName('up')[0].innerHTML = ""
        operator = button.id
        numberButtons.forEach(element => {
            element.removeEventListener('click',addNumber)
        });
    })
});

额外优化点 #

1. 避免重复绑定事件：aClick函数中你先给数字按钮绑定了一次addNumber，后面又重复绑定了一次，会导致点击数字时多次触发函数，显示重复数字，建议删除后面那组重复的绑定代码。
2. 修复结果按钮重复绑定问题：result函数里每次执行都会给等于按钮添加新的点击事件，多次点击等于会重复计算。直接把resultButton.addEventListener('click', result)放在aClick里仅执行一次，result函数只保留计算逻辑：

// 修改后的result函数
function result(){
    b = parseInt(document.getElementsByClassName('up')[0].innerHTML)
    document.getElementsByClassName('down')[0].innerHTML=operate(a,operator,b)
}

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