JS新手计算器开发：如何限制首位输入仅为数字、禁止输入运算符

问题原因分析 #

你写的判断逻辑失效有两个核心错误：

• 用了单等号=，这是赋值操作，不是逻辑比较操作，不会触发预期的判断逻辑
• 直接将字符串单个字符与operator数组做相等比较，这类比较永远返回false，判断某个值是否在数组中需要使用Array.includes()方法

正确实现逻辑 #

你需要新增的判断逻辑是：当显示屏当前为空时，如果用户点击的是运算符或者等号，直接拦截输入，不追加到显示屏内容里。

修改后的完整代码如下：

const buttons = document.querySelectorAll('button');
const display = document.querySelector('.display');
const operator = ['+', '-', '*', '/', '=']; // 把=也加进来，同样不允许首位输入

buttons.forEach(function(button) {
  button.addEventListener('click', calculate);
});

function calculate(event) {
  const clickedButtonValue = event.target.value;

  // 新增判断：显示屏为空时，禁止输入运算符和等号
  if (display.value === '' && operator.includes(clickedButtonValue)) {
    return; // 直接终止后续逻辑，不输入当前字符
  }

  // 原有后续逻辑
  if (clickedButtonValue === '=' && display.value !== '') {
    display.value = eval(display.value)
  } else if (clickedButtonValue === 'C') {
    display.value = ''
  } else {
    display.value += clickedButtonValue;
  }
}

额外说明 #

如果你需要支持首位输入负号-（比如输入负数），可以把-从运算符数组里单独拎出来做特殊判断即可。

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