原生JS开发计算器点击内容被覆盖，如何保留每次点击的输入值？

算力阿峰

2026-10-5

原生JS计算器连续输入实现指导

核心问题原因

你当前点击按钮后原有内容被替换，是因为每次点击都直接对显示区域的textContent/innerHTML执行赋值操作，相当于直接覆盖原有内容，改成追加内容的逻辑即可实现连续输入。

先定义一个全局变量存储用户的所有输入内容，比如 let userInput = '0'，页面初始化时直接把这个变量的值同步到#number-input显示区域即可。
数字、运算符按钮点击时，不要直接给显示区域赋值，先把当前点击按钮对应的内容追加到userInput变量末尾，再把更新后的userInput赋值给显示区域的textContent。比如点击按钮7，逻辑为：
```
userInput += '7'
document.getElementById("number-input").textContent = userInput
```
AC清空按钮点击时，直接把userInput重置为初始的'0'再同步到显示区域即可；DEL单删按钮可以用字符串的slice方法删除最后一位，逻辑为：
```
userInput = userInput.slice(0, -1)
document.getElementById("number-input").textContent = userInput
```

你当前每个按钮单独绑定事件的写法冗余度很高，可以按以下逻辑优化：

给所有计算器按钮加上相同的类名，比如class="calc-btn"
用document.querySelectorAll('.calc-btn')批量获取所有按钮的DOM节点集合
用forEach遍历这个节点集合，统一给所有按钮绑定点击事件，通过事件对象的target属性拿到当前点击按钮的文本内容，不需要再给每个按钮单独写点击逻辑。