JavaScript实现两输入值算术运算的功能问题排查

我帮你检查了代码，发现几个关键问题导致功能无法正常工作，下面逐一说明并给出修复方案：

一、事件监听的错误写法 #

你在添加事件监听时直接执行了函数：

firstNum.addEventListener("input", mainFunction());
secondNum.addEventListener("input", mainFunction());
result.addEventListener("input", mainFunction());

这里的mainFunction()会在页面加载时立刻执行一次，之后输入框变化时不会再触发函数。正确的做法是传递函数引用（不要加括号），同时还要给下拉菜单添加change事件，确保切换运算时能重新计算：

firstNum.addEventListener("input", mainFunction);
secondNum.addEventListener("input", mainFunction);
document.getElementById("options").addEventListener("change", mainFunction);

二、运算逻辑的判断错误 #

你当前的判断条件if (document.getElementById("options").options[0])只是在检查第一个选项是否存在，不管用户选哪个运算，都会执行加法。正确的做法是获取下拉菜单的选中索引，来区分不同的运算：

const selectedOp = document.getElementById("options").selectedIndex;
let calcResult;
const one = parseFloat(firstNum.value) || 0;
const two = parseFloat(secondNum.value) || 0;

switch(selectedOp) {
  case 0: // 加法
    calcResult = one + two;
    break;
  case 1: // 减法
    calcResult = one - two;
    break;
  case 2: // 乘法
    calcResult = one * two;
    break;
  case 3: // 除法
    // 处理除数为0的异常情况
    calcResult = two === 0 ? "错误：除数不能为0" : one / two;
    break;
}
result.textContent = calcResult;

三、多余的事件监听 #

result是<p>标签，它不会触发input事件，所以这个监听可以直接去掉，没必要保留。

修复后的完整代码 #

HTML #

<h1>Calculator</h1>
<form>
  <input type="number" id="num1" placeholder="First Number"/>
  <select id="options">
    <option id="addition">&#43;</option>
    <option id="subtraction">&#8722;</option>
    <option id="multiplication">&#10006;</option>
    <option id="division">&#247;</option>
  </select>
  <input type="number" id="num2" placeholder="Second Number"/>
  <p id="result"></p>
</form>

CSS #

* {
  font-family: helvetica;
  text-align: center;
}

JavaScript #

// Variables
const firstNum = document.getElementById("num1");
const secondNum = document.getElementById("num2");
const result = document.getElementById("result");
const options = document.getElementById("options");

// Event Listeners
firstNum.addEventListener("input", mainFunction);
secondNum.addEventListener("input", mainFunction);
options.addEventListener("change", mainFunction);

// Main JavaScript
function mainFunction() {
  const one = parseFloat(firstNum.value) || 0;
  const two = parseFloat(secondNum.value) || 0;
  let calcResult;

  switch(options.selectedIndex) {
    case 0:
      calcResult = one + two;
      break;
    case 1:
      calcResult = one - two;
      break;
    case 2:
      calcResult = one * two;
      break;
    case 3:
      calcResult = two === 0 ? "错误：除数不能为0" : one / two;
      break;
  }

  result.textContent = calcResult;
}

这样修改后，用户输入数字、切换运算符号时都会实时计算并显示正确结果，还处理了除法除数为0的异常情况。

内容的提问来源于stack exchange，提问作者Bachoo