JS计算器点击数字按钮每次仅显示单个数值的问题咨询

错误原因 #

• 你对forEach的猜测不成立，它仅用来批量给数字按钮绑定点击事件，不会阻止多数字拼接逻辑
• 错误使用placeholder属性存储输入内容：该属性是输入框无内容时的提示文本，用户输入内容应该存储在输入框的value属性中
• 每次点击直接覆盖赋值，没有做字符串拼接，导致仅保留最后一次点击的数字

修复后代码 #

let display = document.getElementById("userinput");
const numberButtons = document.querySelectorAll('.calc > .numbers');

numberButtons.forEach(btn => {
    // 事件参数建议命名为e/event，避免和外层btn变量混淆
    btn.onclick = function (e) {
        // 将新点击的数字拼接到原有值末尾
        display.value += e.target.value;
    }
})

可选优化（初始显示0） #

如果需要初始状态显示0，点击数字后先替换初始0再拼接后续数字，可以修改逻辑如下：

btn.onclick = function (e) {
    if(display.value === '0' || display.value === '') {
        display.value = e.target.value;
    } else {
        display.value += e.target.value;
    }
}

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