Операнды в калькуляторе javascript не будут работать должным образом

Question

Я создаю простой калькулятор с возможностью выбора операнда между +, -, /, *, но программа выполняет случайные операции, иногда прибавляя, когда нужно умножить et c.

Это javascript:

submitBtn = document.querySelector('.submit1')

num1 = document.querySelector('#number1')
num2 = document.querySelector('#number2')
solution = document.querySelector('.solution')

operator = document.querySelector('#operator')

let opSelection = operator.options[operator.selectedIndex].value

function math(a, b) {
  // a = parseInt(num1.value);
  // b = parseInt(num2.value);

  if (opSelection == '-') {
    return a - b;

  } else if (opSelection == '+') {
    return a + b;

  } else if (opSelection == '*') {
    return a * b;

  } else {
    return a / b;
  }

}

submitBtn.addEventListener('click', function() {
  solution.innerHTML = math(parseInt(num1.value), parseInt(num2.value))

})

<div class="quiz__form">
  <div class="quiz">What is
    <input id="number1" type="number">
    <select id="operator">
      <option id="plus" value="">+</option>
      <option id="minus" value="">-</option>
      <option id="multiply" value="">*</option>
      <option id="divide" value="">/</option>
    </select>
    <input id="number2" type="number"> =
    <p class="solution"></p>
  </div>


</div>
<button class="submit1" type=submit>Submit</button>

Я уверен, что это просто, но я новичок и самоучка, поэтому любая помощь, которую вы могли бы получить, была бы очень признательна!

Answer 1

Как сказано в комментарии, вам необходимо установить атрибут «значение».

<option id="plus" value="+">+</option>
<option id="minus" value="-">-</option>
<option id="multiply" value="*">*</option>
<option id="divide" value="/">/</option>

Кроме того, я обнаружил еще одну ошибку, при которой оператор назначается только в начале страницы. Вам необходимо обновлять переменную opSelection каждый раз, когда пользователь нажимает кнопку «Отправить», а не только в начале.

Пример способа исправить это - изменить строку let opSelection = operator.options[operator.selectedIndex].value на просто let opSelection, а затем добавьте следующую строку opSelection = operator.options[operator.selectedIndex].value непосредственно перед строкой solution.innerHTML....