HTML/CSS/JS计算器点击运算符后输入第二数字被拼接如何解决？

不需要实现所谓的“暂停元素展示”，只需要新增一个状态标记判断是否需要在输入下一个数字前清空显示屏即可，具体修改步骤如下：

• 步骤1：新增全局状态标记
  在你的变量声明区域新增标记位，用来记录下一次输入数字时是否需要清空显示屏：

// Declare the main variables
let firstDisplayValue;
let secondDisplayValue;
let operator;
let shouldClearDisplay = false; // 新增这行

• 步骤2：修改运算符点击逻辑
  在getValueAndOp函数末尾新增一行，将标记位设为true，代表用户点击运算符后，下一次输数字要清屏：

function getValueAndOp(e) {
  operators.forEach(operator => operator.classList.remove("active"));
  e.target.classList.add("active");
  getValue();
  if (e.target.getAttribute("id") === "divide") {
    operator = "/";
  } else if (e.target.getAttribute("id") === "multiply") {
      operator = "*";
  } else if (e.target.getAttribute("id") === "subtract") {
      operator = "-";
  } else if (e.target.getAttribute("id") === "add") {
      operator = "+";
  }
  shouldClearDisplay = true; // 新增这行
}

• 步骤3：修改数字输入逻辑
  在displayValue函数最开头加入清屏判断逻辑：

function displayValue(e) {
  // 新增清屏逻辑
  if (shouldClearDisplay) {
    display.textContent = "0";
    display.style.paddingLeft = "440px"; // 重置内边距到初始状态
    shouldClearDisplay = false;
  }
  // 原有逻辑不变
  operators.forEach(operator => operator.classList.remove("active"));
  if (display.textContent === "0") {
    display.textContent = e.target.textContent;
  } else if (display.textContent !== "0") {
      display.textContent += e.target.textContent;
      let paddingLeftValue = parseInt(window.getComputedStyle(display)
                                        .getPropertyValue("padding-left")) - 30;
      display.style.paddingLeft = `${paddingLeftValue}px`;
  }
}

• 步骤4：修复加法运算bug（可选但建议）
  你当前operate函数中判断加法的条件多了一个空格，会导致加法运算失效，修改为：

function operate(operator, a, b) {
  if (operator === "+") { // 把原来的"+ "改成"+"
    return add(a, b);
  } else if (operator === "-") {
      return subtract(a, b);
  } else if (operator === "*") {
      return multiply(a, b);
  } else if (operator === "/") {
      return divide(a, b);
  }
}

• 步骤5：优化计算完成后的输入体验（可选）
  如果希望点击等号得出结果后，再输入新数字时自动清空结果，可以在calculate函数末尾新增一行：

function calculate() {
  operators.forEach(operator => operator.classList.remove("active"));
  getValue();
  let solution = operate(operator, firstDisplayValue, secondDisplayValue);
  display.textContent = solution;
  let solutionLength = solution.toString().length;
  let paddingLeftValue = 440 - (solutionLength - 1) * 30;
  display.style.paddingLeft = `${paddingLeftValue}px`;
  shouldClearDisplay = true; // 新增这行
}

修改完成后即可实现目标效果：点击运算符时显示屏保留第一个数字、运算符保持高亮，点击数字后自动清空原有内容只显示新输入的数字。

内容的提问来源于stack exchange，提问作者Röyal