计算器前端技术求助：运算符样式、eval报错及输入逻辑修复

问题1：乘法运算符显示优化与eval报错修复 #

原因 #

直接用x作为乘法符号显示时，eval()无法识别x为合法乘号，触发语法错误。需实现显示用x、计算用*的分离逻辑。

解决方案 #

1. 修改HTML中乘法按钮的显示文本为x：

<!-- 原代码 -->
<button class="button keys orange-key ">*</button>
<!-- 修改后 -->
<button class="button keys orange-key ">x</button>

2. 在JS的等于号点击逻辑中，先将字符串中的x替换为*再执行计算：

if (e.target.innerHTML == '=') {
  // 空屏判断先执行，对应问题3修复
  if (!string) {
    document.querySelector('input').value = 0;
    return;
  }
  const calcString = string.replaceAll('x', '*');
  string = eval(calcString);
  document.querySelector('input').value = string;
}

问题2：空屏状态禁止直接输入运算符 #

原因 #

当前逻辑未对空输入状态下的运算符点击做限制，导致运算符直接被添加到空字符串中。

解决方案 #

定义运算符集合，在添加内容前判断：如果输入为空且点击的是运算符，则跳过添加操作。修改JS逻辑：

// 在事件监听外定义运算符集合
const operators = ['+', '-', '/', '%', 'x'];

// 事件监听内的else分支修改为：
else {
  const inputVal = e.target.innerHTML;
  // 空屏且点击的是运算符，不执行添加
  if (!string && operators.includes(inputVal)) {
    return;
  }
  string += inputVal;
  document.querySelector('input').value = string;
}

问题3：空屏点击=显示undefined的原因与修复 #

原因 #

空字符串执行eval("")时，返回值为undefined，因此输入框会显示该结果。

解决方案 #

在等于号点击逻辑最开始增加空值判断，若输入为空则直接显示0，不执行eval()：

if (e.target.innerHTML == '=') {
  // 空屏判断
  if (!string) {
    document.querySelector('input').value = 0;
    return;
  }
  const calcString = string.replaceAll('x', '*');
  string = eval(calcString);
  document.querySelector('input').value = string;
}

额外修复：退格键逻辑错误 #

原退格键代码会清空string变量，导致后续输入无法正常累积，修改为：

else if (e.target.innerHTML == 'backspace') {
  string = string.substring(0, string.length - 1);
  document.querySelector('input').value = string;
}

完整修改后的JS代码 #

let string = "";
let buttons = document.querySelectorAll('.keys');
const operators = ['+', '-', '/', '%', 'x'];

Array.from(buttons).forEach((keys) => {
  keys.addEventListener('click', (e) => {
    if (e.target.innerHTML == '=') {
      if (!string) {
        document.querySelector('input').value = 0;
        return;
      }
      const calcString = string.replaceAll('x', '*');
      string = eval(calcString);
      document.querySelector('input').value = string;
    }
    else if (e.target.innerHTML == 'C') {
      string = ""
      document.querySelector('input').value = string;
    }
    else if (e.target.innerHTML == 'backspace') {
      string = string.substring(0, string.length - 1);
      document.querySelector('input').value = string;
    }
    else {
      const inputVal = e.target.innerHTML;
      if (!string && operators.includes(inputVal)) {
        return;
      }
      string += inputVal;
      document.querySelector('input').value = string;
    }
  })
})

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