如何向基本计算器添加不带 eval 的数学函数

Question

根据 Odin 项目的说明，我需要让我的基本计算器通过数学函数而不是使用 eval() 进行操作。 https://www.theodinproject.com/lessons/foundations-calculator

我只将加法部分添加到我的 mathWorks 函数中。但是，我不确定如何在选择“=”时将 mathWorks 函数与 else if 块联系起来。任何帮助将不胜感激。

const container = document.querySelector(".container");
const calcBody = document.querySelector("#calcBody");
const input = document.querySelector("#input");
let a = "";
let b = "";
let operator = "";
let result = "";


      
const numbers = {
    reset: "CE",
    goBack: "C",
    divide: "/",
    multiply: "*",
    seven: 7,
    eight: 8,
    nine: 9,
    add: "+",
    four: 4,
    five: 5,
    six: 6,
    minus: "-",
    one: 1,
    two: 2,
    three: 3,
    decimal: ".",
    zero: 0,
    equal: "=",
};

for (let key in numbers) {
    let button = document.createElement("button");
    button.setAttribute("id", key);
    button.textContent = numbers[key];
    container.appendChild(button);

    button.addEventListener("click", (e) => {
        let val = e.target.textContent;
       
        if(e.target.textContent === "+" || 
           e.target.textContent === "/" ||
           e.target.textContent === "*")
           {
           operator = val;
           input.textContent = a + " " + operator + " ";
           }

        else if(e.target.textContent === "CE") {
             input.textContent = "";
             a = "";
        }
        else if(input.textContent.includes("*") ||
                 input.textContent.includes("+")  ||
                 input.textContent.includes("/")) {
            b += val;
            input.textContent = a + " " + operator + " " + b;
        }

        else if(e.target.textContent === "="){
            mathWorks();
            }
        
        
            else 
        {
            a += val
            input.textContent = a;
        }

    });

    function mathWorks(){
        if(operator === "+"){
            result = parseFloat(a) + parseFloat(b);
            input.textContent = result;
            
        }

    }

}

我现在有点不知所措。我尝试添加 parseFloat 并在 mathWorks 参数中包含 a 和 b。

Answer 1

问题似乎是单击“=”按钮时未调用 mathWorks 函数。这是因为不满足 else

if(e.target.textContent === "=")

的条件。原因是在用第二个操作数更新 b 变量之前检查条件。因此，当单击“=”按钮时，b变量仍然是一个空字符串，并且不满足条件。要解决此问题，您需要在检查“=”按钮是否被单击之前更新 b 变量。

要解决此问题，您需要在检查“=”按钮是否被单击之前更新 b 变量。具体方法如下：

button.addEventListener("click", (e) => {
    let val = e.target.textContent;
   
    if(e.target.textContent === "+" || 
       e.target.textContent === "/" ||
       e.target.textContent === "*")
       {
       operator = val;
       input.textContent = a + " " + operator + " ";
       }

    else if(e.target.textContent === "CE") {
         input.textContent = "";
         a = "";
    }
    else if(input.textContent.includes("*") ||
             input.textContent.includes("+")  ||
             input.textContent.includes("/")) {
        b += val;
        input.textContent = a + " " + operator + " " + b;
    }

    // Check if "=" was clicked after updating `b`
    if(e.target.textContent === "="){
        mathWorks();
    }
    
    else 
    {
        a += val
        input.textContent = a;
    }

});

function mathWorks(){
    if(operator === "+"){
        result = parseFloat(a) + parseFloat(b);
        input.textContent = result;
        
    }

}