JavaScript计算器等号按钮点击返回undefined问题排查

问题现象 #

• 数字、运算符、清空按钮点击功能均符合预期
• 点击等号按钮时，输入框返回undefined，无法得到正确计算结果
• 预设等号逻辑：输入框为空时保持空字符串，有合法表达式时通过eval()计算结果并回显

问题根因 #

通用按钮事件绑定范围错误：

• 代码中通过document.querySelectorAll(".btn")选中所有带btn类的按钮绑定输入拼接事件，误包含了等号、清除按钮
• 等号和清除按钮没有设置data-num自定义属性，点击这两个按钮时，读取e.target.dataset.num会得到undefined，执行screen.value += value时会把字符串"undefined"拼接到已输入的表达式末尾
• 后续等号的计算逻辑执行eval()时，处理的是类似"1+2undefined"的非法表达式，最终返回undefined显示在屏幕上
• 额外小瑕疵：输入框标签的value属性后多写了一个多余分号，不影响功能但不符合HTML语法规范

修复方法 #

1. 缩小通用按钮的选择范围，只选中带data-num属性的数字、运算符按钮，把原代码中的按钮选择语句修改为：

let buttons = document.querySelectorAll(".btn[data-num]");

该选择器只会匹配同时带有btn类、且存在data-num属性的按钮，等号和清除按钮不会触发输入拼接逻辑。
2. （可选）修正HTML输入框的语法错误，去掉value后多余的分号：

<input type="text" class="screen" placeholder="0" value="">

修复后完整JS代码 #

(function(){
    let screen = document.querySelector(".screen");
    // 修正选择器，只选中带data-num的功能输入按钮
    let buttons = document.querySelectorAll(".btn[data-num]");
    let equal = document.querySelector(".btn-equal");
    let clear = document.querySelector(".btn-clear");

    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{
            let answer = eval(screen.value); 
            screen.value = answer;
        } 
    })

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

安全提示：生产环境不要直接使用eval()执行用户输入内容，存在代码注入风险，本修复仅针对当前demo的功能异常问题。

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