Calculator- how to store number after clicking an operator?

Question

I'm trying to build a calculator with vanilla javascript. I managed to store the first number and the operator, but I can't figure out how to store the second number. Can someone please give me a hint or tell mi if there's something wrong in the logic I've written so far?

These are the selectors and the variable where the numbers displayed are stored

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

These are the variables to store the numbers and the operator to use in the function

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();

I don't understand how to access the number after clicking the operator. Can I do it in the same function?

<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

If you just need a calculator that takes 2 numbers and an operator, then you could do the following to store the values for each number as well as the operator.

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

Edit: To elaborate on the comment regarding the value of the first number not printing correctly to the console, please see the code snippet below:

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

    });
});