计算器 - 单击运算符后如何存储数字？

Question

我正在尝试用普通的javascript构建一个计算器。我设法存储了第一个数字和运算符，但我不知道如何存储第二个数字。有人可以给我一个提示或告诉mi，如果我到目前为止写的逻辑有问题吗？这些是选择器和存储显示数字的变量const input = document.querySelector(".display");const numbers = document.querySelectorAll(".number");const operators = document.querySelectorAll(".operator");const dot = document.querySelector(".dot");const clear = document.querySelector(".clear");let displayValue = "0";这些是用于存储数字的变量和要在函数中使用的运算符let firstNum = "";let secondNum = "";let operator;function calculator(firstNum, secondNum, operator) {    operators.forEach(operator => {        operator.addEventListener("click", (e) => {            firstNum = displayValue;            console.log(firstNum);            operator = e.target.innerText;            console.log(operator);        })    })}calculator();我不知道如何在单击运算符后访问该号码。我可以在相同的函数中执行此操作吗？<div class="container">    <div class="display">0</div>    <div class="buttons">        <button class="clear">C</button>        <div></div>        <div></div>        <div></div>        <button class="number">7</button>        <button class="number">8</button>        <button class="number">9</button>        <button class="operator">/</button>        <button class="number">4</button>        <button class="number">5</button>        <button class="number">6</button>        <button class="operator">x</button>        <button class="number">1</button>        <button class="number">2</button>        <button class="number">3</button>        <button class="operator">-</button>        <button class="number">0</button>        <button class="dot">.</button>        <button class="operator">=</button>        <button class="operator">+</button>    </div></div>

Answer 1

如果您只需要一个包含2个数字和一个运算符的计算器，则可以执行以下操作来存储每个数字以及运算符的值。

const input = document.querySelector(".display");

const numbers = document.querySelectorAll(".number");

const operators = document.querySelectorAll(".operator");

const dot = document.querySelector(".dot");

const clear = document.querySelector(".clear");

let displayValue = "0";

let firstNum = "";

let secondNum = "";

let operator = "";

numbers.forEach(number => {

    number.addEventListener("click", e => {

        if (operator === "") { // Read first number if no operator set yet

            firstNum += e.target.innerText;

            console.log(firstNum)

        } else { // Read second number

            secondNum += e.target.innerText;

            console.log(secondNum)

        }

    });

});

operators.forEach(op => {

    op.addEventListener("click", e => {

        operator = e.target.innerText;

        console.log(operator)

        // If equals operator, perform operation

    });

});

编辑：要详细说明有关第一个数字的值未正确打印到控制台的注释，请参阅下面的代码片段：

numbers.forEach(number => {

    number.addEventListener("click", e => {

        if (operator === "") { // Read first number if no operator set yet

            firstNum += e.target.innerText;

        } else { // Read second number

            secondNum += e.target.innerText;

        }

    });

});

operators.forEach(op => {

    op.addEventListener("click", e => {

        if (e.target.innerText !== "=") { // If the operator is not equals

            operator = e.target.innerText;

            console.log(firstNum); // Print the first number

            console.log(operator); // Print the operator

        } else { // If equals button clicked

            console.log(secondNum); // Print 2nd number

            switch (operator) { // Calculate and print output

                case "+":

                    console.log(parseInt(firstNum) + parseInt(secondNum));

                    break;

                case "-":

                    console.log(parseInt(firstNum) - parseInt(secondNum));

                    break;

                // etc...

                default:

                    break;

            }

        }

    });

});