JavaScript计算器开发：如何限制运算符按钮点击后仅单次显示

核心逻辑 #

要实现禁止连续输入运算符，只需要在点击运算符按钮时增加一层校验：判断当前显示屏最后一位字符是否已经是运算符，再决定是否插入新的运算符。我们还可以额外做运算符替换逻辑优化体验：如果用户已经输入了一个运算符，再点击其他运算符时，直接用新运算符替换已有的旧运算符，不需要用户手动删除。

修改后的JS代码 #

// 所有按钮变量定义
let operationButtons = document.querySelectorAll('[data-operation]');
let numberButtons = document.querySelectorAll('[data-number]');
let display = document.querySelector('[data-current-operand]');
// 定义所有运算符集合，方便后续校验
const operatorList = ['÷', '*', '+', '-'];
// 按钮点击展示内容的逻辑
const displayValue = function () {
  numberButtons.forEach(button => {
    button.addEventListener('click', () => {
      display.innerHTML += button.innerHTML;
    })
  })
  operationButtons.forEach(item => {
    item.addEventListener('click', () => {
      const currentDisplay = display.innerHTML;
      // 显示屏为空时不允许输入运算符
      if (currentDisplay === '') return;
      // 取显示屏最后一位字符
      const lastChar = currentDisplay.slice(-1);
      // 校验最后一位是不是运算符
      if (operatorList.includes(lastChar)) {
        // 如果已经是运算符，直接替换成新的运算符，不需要追加
        display.innerHTML = currentDisplay.slice(0, -1) + item.innerHTML;
      } else {
        // 最后一位是数字，正常追加运算符
        display.innerHTML += item.innerHTML;
      }
    })
  });
};
// 调用函数绑定点击事件
displayValue();

可选调整：仅禁止连续输入，不做替换 #

如果你不需要运算符替换功能，只要求连续点击运算符不生效，只需要把运算符点击事件里的逻辑改成如下即可：

operationButtons.forEach(item => {
  item.addEventListener('click', () => {
    const currentDisplay = display.innerHTML;
    if (currentDisplay === '') return;
    const lastChar = currentDisplay.slice(-1);
    // 最后一位是运算符时直接终止，不做任何操作
    if (operatorList.includes(lastChar)) return;
    display.innerHTML += item.innerHTML;
  })
});

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