JS简易计算器中eval函数返回undefined导致计算异常的问题

你的核心问题是按钮事件绑定范围错误：
你通过document.querySelectorAll('.btn')选中了所有带.btn类的按钮，其中「清除（C）」和「等于（=）」按钮没有data-num属性。当点击等于键时，会先触发通用按钮的点击事件，将undefined追加到输入框的3+3之后，变成3+3undefined，随后执行等于键的求值逻辑时，eval处理无效表达式就会返回异常结果或undefined。

修复方案1：缩小按钮选择范围 #

修改按钮选择器，只选中带有data-num属性的按钮，自动排除无数据属性的按钮：

(function() {
  let screen = document.querySelector('#display');
  // 只选择带data-num的.btn元素
  let buttons = document.querySelectorAll('.btn[data-num]');
  let clear = document.querySelector('#clear');
  let equal = document.querySelector('#equals');

  buttons.forEach(function(button) {
    button.addEventListener('click', function(e) {
      let value = e.target.dataset.num;
      screen.value += value;
    });
  });

  equal.addEventListener('click', function(e) {
    if (screen.value === '') {
      screen.value = "";
    } else {
      try {
        let answer = eval(screen.value);
        screen.value = answer;
      } catch (err) {
        // 处理无效表达式的报错
        screen.value = 'Error';
      }
    }
  });

  clear.addEventListener('click', function(e) {
    screen.value = "";
  });
})();

修复方案2：在通用点击事件中增加判断 #

如果data-num不存在，就不执行追加操作：

buttons.forEach(function(button) {
  button.addEventListener('click', function(e) {
    let value = e.target.dataset.num;
    // 仅当value存在时才追加
    if (value) {
      screen.value += value;
    }
  });
});

额外提示 #

eval函数虽然能快速实现表达式求值，但存在安全风险（可能执行恶意注入的代码），仅适合练习场景。如果后续想优化，可以学习使用表达式解析库，或自行实现简单的四则运算逻辑。

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