javascript 计算器中的操作数无法按预期工作

Question

我正在构建一个简单的计算器，它能够在 +、-、/、* 之间选择操作数，但程序正在执行随机操作，有时会在应该乘法时添加等。

这是 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然后在solution.innerHTML...之前直接添加以下行opSelection = operator.options[operator.selectedIndex].value solution.innerHTML...行。