为何DOM字符串末尾无法添加空格？计算器+号右侧空格缺失求助

问题核心 #

需要实现计算器显示屏中+号前后均带空格（如97 + 78），但当前仅左侧有空格（如97 +78），同时要保证同一整数的数字间无空格（如194而非1 9 4）。

现有代码问题分析 #

1. 点击加号时传入的字符串是" +_"，右侧缺少空格，且下划线无实际作用；
2. addToDisplay函数的逻辑依赖currentNumber的判断，但未明确区分数字和运算符的不同处理规则，导致运算符右侧无法自动添加空格。

修复方案 #

1. 区分运算符与数字的处理逻辑 #

• 运算符（如+）：直接传入带前后空格的格式" + "，确保前后都有空格；
• 数字：直接追加到显示屏末尾，保证数字连续无空格。

2. 优化运算符点击逻辑（避免重复运算符） #

添加判断，防止连续点击运算符时出现多余空格或重复运算符。

修改后的关键代码 #

function addToDisplay(string) {
  const display = document.querySelector("#display");
  display.style.color = "red";
  // 直接追加传入的字符串，数字/运算符的格式由调用处控制
  display.innerText += string;
}

// 清空当前数字的函数（保持原有逻辑）
function clearCurrentNumber() {
  currentNumber = undefined;
}

const onClick = function() {
  const display = document.querySelector("#display");
  switch (this.id) {
    case "plus":
      clearCurrentNumber();
      const lastContent = display.innerText.trim();
      const lastChar = lastContent.slice(-1);
      // 检查最后一个字符是否为运算符，避免重复添加
      if (!["+", "-", "*", "/"].includes(lastChar)) {
        addToDisplay(" + ");
      } else {
        // 替换已有的运算符为+，保持格式统一
        display.innerText = lastContent.slice(0, -2) + " + ";
      }
      break;
    // 数字按钮的示例处理（以数字1为例）
    case "num1":
      addToDisplay("1");
      currentNumber = (currentNumber || "") + "1";
      break;
    // 其他按钮逻辑类似...
  }
};

// 绑定事件
document.getElementById('plus').onclick = onClick;
document.getElementById('num1').onclick = onClick;
// 其他按钮绑定...

效果说明 #

• 点击数字按钮时，数字直接连续追加，无空格；
• 点击加号按钮时，自动在前后添加空格，若之前已是运算符则替换为+，保证格式统一；
• 输入示例：先点9→7→加号→7→8，显示屏会显示97 + 78。

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