My html calculator is not performing operations as expected

Question

I'm writing the code for my html calculator, and I'm stuck at defining its logic. FYI, after having the value a initialized after performing the first operation, the calculator is supposed to retain that value as the variable a and perform an operation with the new b, which is input after one of the operator button has been pressed.

However, at the time of this writing, this doesn't work. FYI, after I perform 14+3=17, I press "-" and "5". After finalizing with "=", I got -2. I thought that after a has been initialized after aClick() has been executed for the first time, it would start taking the values entered thereafter as 'b'. Does anyone have any idea on why after initializing a, aClick() still acts as if a is undefined?

let a
let b
let operator

function add(a, b) {
  return a + b
}

function subtract(a, b) {
  return a - b
}

function multiply(a, b) {
  return a * b
}

function divide(a, b) {
  return a / b
}

function operate(a, operator, b) {
  switch (operator) {
    case "+":
      return add(a, b)
    case "-":
      return subtract(a, b)
    case "/":
      return divide(a, b)
    case "*":
      return multiply(a, b)
  }
}

numberButtons = document.querySelectorAll('.number')
specialButtons = document.querySelectorAll('.special')
operatorButtons = document.querySelectorAll('.operator')
resetButton = document.getElementById('C')
resultButton = document.getElementById('=')

function addNumber(Event){
    document.getElementsByClassName('up')[0].innerHTML +=Event.target.id
}

function result() {
  resultButton.addEventListener('click', function() {
    b = parseInt(document.getElementsByClassName('up')[0].innerHTML)
    document.getElementsByClassName('down')[0].innerHTML = operate(a, operator, b)
    a = parseInt(document.getElementsByClassName('down')[0].innerHTML)
  })
}


function aClick() {
  if (a === undefined) {
    numberButtons.forEach(button => {
      button.addEventListener("click", addNumber)
    });
    operatorButtons.forEach(button => {
      button.addEventListener('click', function() {
        a = parseInt(document.getElementsByClassName('up')[0].innerHTML)
        operator = button.id
        numberButtons.forEach(element => {
          element.removeEventListener('click', addNumber)
        });
        document.getElementsByClassName('up')[0].innerHTML = ""
        numberButtons.forEach(button => {
          button.addEventListener("click", addNumber)
        });
      })
    });
    result()
  } else if (a !== undefined) {
    operatorButtons.forEach(button => {
      button.addEventListener('click', function() {
        b = parseInt(document.getElementsByClassName('up')[0].innerHTML)
        operator = button.id
        numberButtons.forEach(element => {
          element.removeEventListener('click', addNumber)
        });
        document.getElementsByClassName('up')[0].innerHTML = ""
        numberButtons.forEach(button => {
          button.addEventListener("click", addNumber)
        });
      })
    });
  }
}

aClick()

<div class="display">
  <div class="up"></div>
  <div class="down"></div>
</div>
<div class="button-layout">
  <ul>
    <div>
      <button id="1" class="number">1</button>
      <button id="2" class="number">2</button>
      <button id="3" class="number">3</button>
      <button id="+" class="operator">+</button>
    </div>

    <div>
      <button id="4" class="number">4</button>
      <button id="5" class="number">5</button>
      <button id="6" class="number">6</button>
      <button class="operator" id="-">-</button>
    </div>

    <div>
      <button id="7" class="number">7</button>
      <button id="8" class="number">8</button>
      <button id="9" class="number">9</button>
      <button class="operator" id="*">*</button>
    </div>

    <div>
      <button id="C" class="special">C</button>
      <button id="0" class="number">0</button>
      <button id="=" class="special">=</button>
      <button class="operator" id="/">/</button>
    </div>

  </ul>
</div>