计算器输入框无法叠加显示多个按键值的问题如何解决

问题根源 #

现有逻辑中每次点击按键直接给输入框value赋新值，没有保留原有内容，因此会出现新值覆盖旧值的问题。

修复步骤 #

1. 核心逻辑调整 #

将输入框的赋值逻辑从直接替换修改为内容追加，同时处理初始默认值0的场景：如果当前输入框是初始的0，点击数字/运算符直接替换0，否则追加内容。

2. 补充特殊按键逻辑 #

增加清除键C、等号=的对应处理逻辑，满足计算器基础功能需求。

3. 优化遍历逻辑 #

原有代码写死i<16的遍历边界扩展性差，直接用获取到的按钮集合长度作为遍历边界更稳妥。

修复后的完整JavaScript代码 #

// 获取所有按钮和输入框元素
const buttons = document.querySelectorAll('button');
const inputBox = document.querySelector('input');

// 遍历绑定点击事件
for(let i = 0; i < buttons.length; i++){
  buttons[i].addEventListener('click', function(){
    const keyContent = this.innerHTML.trim();
    displayText(keyContent);
  })
}

function displayText(currentKey){
  // 处理清除键逻辑
  if(currentKey === 'C') {
    inputBox.value = '0';
    return;
  }
  // 处理等号计算逻辑（eval仅作演示，生产环境可替换为自定义表达式解析逻辑避免安全风险）
  if(currentKey === '=') {
    try {
      inputBox.value = eval(inputBox.value);
    } catch (err) {
      inputBox.value = '错误';
    }
    return;
  }
  // 处理初始值0，避免出现0123这类开头带无效0的内容
  if(inputBox.value === '0' || inputBox.value === '错误') {
    inputBox.value = currentKey;
  } else {
    // 核心修复：追加内容而不是覆盖原有值
    inputBox.value += currentKey;
  }
}

可选简化方案 #

如果仅需要实现连续输入内容、不需要计算和特殊按键处理，只需要修改原有displayText函数的赋值逻辑即可：

function displayText(currentKey){
   var activeButton = document.querySelector('input')
   // 把=改成+=即可实现内容追加
   activeButton.value += currentKey;
 }

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