HTML Calculator

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <input id="display">

  <button onclick="handleClick(event)" value="1">1</button>
  <button onclick="handleClick(event)" value="2">2</button>
  <button onclick="handleClick(event)" value="3">3</button>
  <button onclick="handleClick(event)" value="4">4</button>
  <button onclick="handleClick(event)" value="5">5</button>
  <button onclick="handleClick(event)" value="6">6</button>
  <button onclick="handleClick(event)" value="7">7</button>
  <button onclick="handleClick(event)" value="8">8</button>
  <button onclick="handleClick(event)" value="9">9</button>
  <button onclick="handleClick(event)" value="+">+</button>
  <button onclick="handleClick(event)" value="-">-</button>
  <button onclick="handleClick(event)" value="*">*</button>
  <button onclick="handleClick(event)" value="/">/</button>
  <button onclick="handleClick(event)" value="=">=</button>

  <script>
    let historyValues = [];
    const displayInput = document.getElementById('display');

    function getEquasion() {
      let displayValue = '';

      historyValues.forEach(item => {
        displayValue = displayValue + item;
      });

      return displayValue;
    }

    function solve() {
      const equasion = getEquasion();
      const solution = eval(equasion);

      displayInput.value = solution;
      historyValues = [];
    }

    function updateDisplay() {
      const displayValue = getEquasion();

      displayInput.value = displayValue;
    }

    function handleClick(event) {
      const buttonValue = event.target.value;

      if (buttonValue === '=') {
        solve();

        return;
      }

      historyValues.push(buttonValue);

      updateDisplay();
    }
  </script>
</body>
</html>