How to do an event listener so that = sign calculates Sum?

Question

My understanding of an event handler is that it allows the event handler that takes an existing function and allows you to do something with it like a click or some kind of event

What I am trying to do is when the = button is pressed on my calculator it uses the calculation function and takes the if-else statements and applies it to the = sign. For example, if the user clicks 1 + 1 the = sign should add them together and give the answer.

/*********************
Setting up varlaibles*
**********************/

let result;
let num1;
let num2;


/*****************************************
Function for numbers to display on screen*
******************************************/

function buttonPress(numbers) {

  let input = document.querySelector('.answer').innerText.split('\n').join('') + numbers
  let display = document.querySelector('.answer').innerHTML = input
  console.log(`${typeof display} ${display}`)

  if (display.length >= 21) {

    for (let i = 0; i < display.length; i++) {
      document.querySelector('.answer').style.marginTop = -i + "px";
    }
  }
}

/***********************************
Function for calculation of numbers*
************************************/

function calculation(buttonPress) {

  switch (numbers) {
    case "/":
      numbers / numbers;
      break;
    case "*":
      numbers * numbers;
      break;
    case "+":
      numbers + numbers;
      break;
    case "-":
      numbers - numbers;
      break;
    case "%":
      numbers % numbers;
      break;
    default:
  }

  buttonPress()
}

<div class="answer"></div>

<div class="row">

  <div class="col">
    <button class="col-op clear" onclick="buttonPress('C')">C</button>
    <button class="col-op" onclick="buttonPress('()')">()</button>
    <button class="col-op" onclick="buttonPress('%')">%</button>
    <button class="col-op" onclick="buttonPress('/')">/</button>
  </div>

  <div class="col">
    <button class="col-num" onclick="buttonPress(1)">1</button>
    <button class="col-num" onclick="buttonPress(2)">2</button>
    <button class="col-num" onclick="buttonPress(3)">3</button>
    <button class="col-op-end" onclick="buttonPress('X')">x</button>
  </div>

  <div class="col">
    <button class="col-num" onclick="buttonPress(4)">4</button>
    <button class="col-num" onclick="buttonPress(5)">5</button>
    <button class="col-num" onclick="buttonPress(6)">6</button>
    <button class="col-op-end" onclick="buttonPress('+')">+</button>
  </div>

  <div class="col">
    <button class="col-num" onclick="buttonPress(7)">7</button>
    <button class="col-num" onclick="buttonPress(8)">8</button>
    <button class="col-num" onclick="buttonPress(9)">9</button>
    <button class="col-op-end" onclick="buttonPress('-')">-</button>
  </div>

  <div class="col">
    <button class="col-num" id="border-left" onclick="buttonPress(0)">0</button>
    <button class="col-num" onclick="buttonPress('.')">.</button>
    <button class="col-eq-end" id="border-right" onclick="buttonPress('=')">=</button>
  </div>

</div>

The outcome should be with addEventListener that if the user uses operators to with the numbers the = sign should give the answer.

Answer 1

to add listener

element.addEventListener('eventName', callbackFunction(){})

to calculate using simple method

let result = eval("15 + 4 - 2 * 4")
console.log(result)

but they said eval() is evil so you can try method below

let char, result = '';

document.querySelectorAll('button').forEach(button=> {  // add click event to all button
  button.addEventListener('click', (e)=> {
    char = e.target.textContent;
    if (char == '=') {
      // using eval()
      // document.querySelector('.answer').textContent = eval(result)
      //
      let values = result.split(/([-+\/\*])/);
      for (let i = 0; i < values.length; i++) {
        if (isNaN(values[i])) {
          let operator = values[i]
          i++;
          let nextNumber = parseFloat(values[i])
          result = operations[operator](result, nextNumber)
        } else {
          result = parseFloat(values[i])
        }
      }
    } else if (char == 'C') {
      result = '';
    } else {
      result += char;
    }
    document.querySelector('.answer').textContent = result
  })
})

var operations = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => a / b,
};

.answer{display: block;width: 200px;height: 20px;border: 1px solid #bbb;margin: 10px 0;}

<div class="answer">0</div>

<div class="row">
  <div class="col">
    <button class="col-op clear">C</button>
    <button class="col-op">()</button>
    <button class="col-op">%</button>
    <button class="col-op">/</button>
  </div>

  <div class="col">
    <button class="col-num">1</button>
    <button class="col-num">2</button>
    <button class="col-num">3</button>
    <button class="col-op-end">*</button>
  </div>

  <div class="col">
    <button class="col-num">4</button>
    <button class="col-num">5</button>
    <button class="col-num">6</button>
    <button class="col-op-end">+</button>
  </div>

  <div class="col">
    <button class="col-num">7</button>
    <button class="col-num">8</button>
    <button class="col-num">9</button>
    <button class="col-op-end">-</button>
  </div>

  <div class="col">
    <button class="col-num" id="border-left">0</button>
    <button class="col-num">.</button>
    <button class="col-eq-end" id="border-right">=</button>
  </div>

</div>