Знак = в простом калькуляторе на JavaScript

Question

Пишу самый простой калькулятор на JS. В чем суть:

Нужно, чтобы калькулятор позволял вводить только цифры по кликам на кнопки, у меня они с классом "button". Цифры выводятся в поле с классом "calculator-output" (это реализовать удалось)
Калькулятор должен воспроизводить математические операции - сложение, деление, вычитание, умножение. По клику на кнопку со знаком равенства, результат отображается в том же поле.

Есть сложность с символом равно - по клику на него ничего не происходит, консоль выдает Uncaught syntax error. Как можно изменить код, чтобы получить результат операций?

let calculator = document.querySelector('.calculator');
let display = document.querySelector('.calculator-output');

calculator.addEventListener('click', btn => {
  if (btn.target.matches('.button')) {
    display.value += btn.target.value;
  } else if (btn.target.matches('.clean')) {
    display.value = '';
  } else if (btn.target.matches('.answer')) {
    display.value = eval(btn.target.value);
  }
})

<div class="calculator">
  <input type="text" class="calculator-output" readonly>
  <div class="keyboard-num">
    <input type="button" value="0" class="button" name="number">
    <input type="button" value="1" class="button" name="number">
    <input type="button" value="2" class="button" name="number">
    <input type="button" value="3" class="button" name="number">
    <input type="button" value="4" class="button" name="number">
    <input type="button" value="5" class="button" name="number">
    <input type="button" value="6" class="button" name="number">
    <input type="button" value="7" class="button" name="number">
    <input type="button" value="8" class="button" name="number">
    <input type="button" value="9" class="button" name="number">
  </div>
  <div class="keyboard-symb">
    <input type="button" value="+" class="button" name="add">
    <input type="button" value="-" class="button" name="subtract">
    <input type="button" value="*" class="button" name="multiply">
    <input type="button" value="/" class="button" name="divide">
    <input type="button" value="=" class="answer" name="answer">
    <input type="button" value="С" class="clean" name="clean">
  </div>
</div>

Answer 1

let calculator = document.querySelector('.calculator');
let display = document.querySelector('.calculator-output');

calculator.addEventListener('click', btn => {
  if (btn.target.matches('.button')) {
    display.value += btn.target.value;
  } else if (btn.target.matches('.clean')) {
    display.value = '';
  } else if (btn.target.matches('.answer')) {
    display.value = eval(display.value);
  }
})

<div class="calculator">
  <input type="text" class="calculator-output" readonly>
  <div class="keyboard-num">
    <input type="button" value="0" class="button" name="number">
    <input type="button" value="1" class="button" name="number">
    <input type="button" value="2" class="button" name="number">
    <input type="button" value="3" class="button" name="number">
    <input type="button" value="4" class="button" name="number">
    <input type="button" value="5" class="button" name="number">
    <input type="button" value="6" class="button" name="number">
    <input type="button" value="7" class="button" name="number">
    <input type="button" value="8" class="button" name="number">
    <input type="button" value="9" class="button" name="number">
  </div>
  <div class="keyboard-symb">
    <input type="button" value="+" class="button" name="add">
    <input type="button" value="-" class="button" name="subtract">
    <input type="button" value="*" class="button" name="multiply">
    <input type="button" value="/" class="button" name="divide">
    <input type="button" value="=" class="answer" name="answer">
    <input type="button" value="С" class="clean" name="clean">
  </div>
</div>

БЛОГ НА HUSL

Знак = в простом калькуляторе на JavaScript

Ответы (1 шт):