So I’ve been battling logic behind a calculator and I can’t make it work. I think that my problem is now knowing not to assign a number as a number 2 on the display. When I call for operate() in operate function, it doesn’t know what num2 is? I just don’t know anymore, my head is literally gonna explode. lol

const add = (num1, num2) => num1 + num2;
const subtract = (num1, num2) => num1 - num2;
const multiply = (num1, num2) => num1 * num2;
const divide = (num1, num2) => num1 / num2;


const calcDisplay = document.querySelector('.output');

calcDisplay.textContent="0"
let num1;
let num2;
let operator



function operate() {
  let result;
  if (operator === add) {
    result = num1 + num2;
  } else if (operator === subtract) {
    result = num1 - num2;
  } else if (operator === multiply) {
    result = num1 * num2;
  } else if (operator === divide) {
    result = num1 / num2;
  }
  return result
}




// Click events for every button on the calculator //
function equals() {
  const buttonEquals = document.querySelector('.keyButtonEquals');
  buttonEquals.addEventListener('click', () => {
    if (num1 + num2) {
      return operate()
    }

  });

}

equals();

const buttonClear = document.querySelector('.keyButtonClear');
buttonClear.addEventListener('click', () => {
  calcDisplay.textContent="0"

});







const buttons = document.querySelectorAll('.keyButton').forEach(button => {
  button.addEventListener('click', () => {
    removeClass();
    const action = button.dataset.action;
    num1 = button.textContent;
    num2 = button.textContent;
    const displayedNum = calcDisplay.textContent;


    if (displayedNum === "0") {
      calcDisplay.textContent = num1;
    } else {
      calcDisplay.textContent = displayedNum + num1;
    }

  });

});

function deleteInput() {
  const deleteButton = document.querySelector('.keyButtonDelete')
  deleteButton.addEventListener('click', () => {

    calcDisplay.textContent = calcDisplay.textContent.slice(0, -1);
  });

}
deleteInput()

const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(button => {
  button.addEventListener('click', () => {
    const action = button.dataset.action;

    if (action === 'add' && add ||
      action === 'subtract' && subtract ||
      action === 'multiply' && multiply ||
      action === 'divide' && divide
    ) {
      button.classList.add('isDepressed')
    }
  });

});


function removeClass() {
  buttonRremove = document.querySelectorAll('.keyButtonOperation').forEach(button => {
    button.classList.remove('isDepressed')

  });
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="https://stackoverflow.com/questions/72735126/./styles/style.css">

  <body>
    <div class="calcContainer">


      <div class="buttons">
        <div class="output">
        </div>
        <button class="keyButton" data-action=7>7</button>
        <button class="keyButton" data-action=8>8</button>
        <button class="keyButton" data-action=9>9</button>
        <button class="keyButtonOperation" data-action="SignChange">+/-</button>
        <button class="keyButtonDelete" data-action="DEL">DEL</button>

        <button class="keyButton" data-action=4>4</button>
        <button class="keyButton" data-action=5>5</button>
        <button class="keyButton" data-action=6>6</button>
        <button class="keyButtonOperation" data-action="multiply">X</button>
        <button class="keyButtonOperation" data-action="divide">%</button>

        <button class="keyButton" data-action=1>1</button>
        <button class="keyButton" data-action=2>2</button>
        <button class="keyButton" data-action=3>3</button>
        <button class="keyButtonOperation" data-action="substract">-</button>
        <button class="keyButtonEquals" data-action="=">=</button>

        <button class="keyButtonClear" data-action="clear">C</button>
        <button class="keyButton" data-action=0>0</button>
        <button class="keyButton" data-action=.>.</button>
        <button class="keyButtonOperation" data-action="add">+</button>
      </div>
    </div>

    <script src="./scripts/script.js"></script>
  </body>
</head>

</html>

3