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

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;
            }
        }

    });
});