计算器项目eval()运行报错：Uncaught SyntaxError赋值左侧无效

错误原因 #

你碰到的语法报错以及计算器无法正常运行的问题，来自JS代码的逻辑错误和语法疏漏，主要问题如下：

• 变量未声明：msg、循环变量item都没有用let声明，会产生隐式全局变量，极端情况会触发赋值错误
• 执行逻辑顺序错误：当前代码不管点击什么按钮，都会先把按钮字符追加到输入框，再判断按钮功能，逻辑完全颠倒
• 表达式计算逻辑错误：点击非C、非=的按钮时，你直接把msg置空，导致点击=时拿到的表达式为空，无法计算
• 乘法符号不兼容：界面上的乘号用的是x，不是JS识别的*，eval执行时会报错
• 清空逻辑冗余：点击C时输入框赋值为带空格的" "，不是空字符串，后续计算会有多余空格干扰

修复后的完整JS代码 #

let screen = document.getElementById('screen');
let buttons = document.querySelectorAll('button');

function addOutput(e) {
    let char = e.target.innerText;
    // 先判断按钮类型再处理
    if(char === 'C'){
        // 清空输入框
        screen.value = "";
    }else if(char === '='){
        try{
            // 把x替换成*再计算
            let expression = screen.value.replaceAll('x', '*');
            screen.value = eval(expression);
        }catch(err){
            // 非法表达式报错提示
            screen.value = "错误";
        }
    }else{
        // 其他字符直接追加到输入框
        screen.value += char;
    }
}

// 循环变量加let声明
for (let item of buttons){
    item.addEventListener('click', addOutput);
}

验证步骤 #

替换原logic.js的内容后刷新页面，即可正常实现数字输入、四则运算、清空功能，不会再出现之前的语法报错。

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