使用条件语句编写JavaScript计算器 修复仅加法运算生效问题

你代码的核心问题出在HTML的id属性重复：
HTML规范要求同一个页面内id必须唯一，你给四个运算符按钮都设置了id="operator"，document.getElementById("operator")永远只会返回第一个匹配的元素（也就是+号按钮），所以不管你点哪个按钮，拿到的运算符永远是+，自然只会执行加法。

第一步：修改HTML代码 #

把重复的id删掉，同时点击按钮时把当前按钮的value（也就是运算符）直接传给count函数：

Number 1:<input type="number" id="num1"><br><br>
Number 2:<input type="number" id="num2"><br><br>

<input type="button" value="+" onclick="count(this.value)">
<input type="button" value="-" onclick="count(this.value)">
<input type="button" value="*" onclick="count(this.value)">
<input type="button" value="/" onclick="count(this.value)">

<p id="output"></p>

第二步：修改JavaScript代码 #

实现1：使用if else条件判断 #

调整count函数接收运算符参数，保留原有判断逻辑即可，额外增加了合法性校验避免报错：

function count(optr) {
  var n1 = parseFloat(document.getElementById("num1").value);
  var n2 = parseFloat(document.getElementById("num2").value);
  // 校验输入是否为合法数字
  if (isNaN(n1) || isNaN(n2)) {
    document.getElementById("output").innerHTML = "请输入有效的数字";
    return;
  }
  // 除法单独校验除数不能为0
  if (optr === '/' && n2 === 0) {
    document.getElementById("output").innerHTML = "除数不能为0";
    return;
  }

  let result;
  if (optr == '+') {
    result = n1 + n2;
  } else if (optr == '-') {
    result = n1 - n2;
  } else if (optr == '*') {
    result = n1 * n2;
  } else if (optr == '/') {
    result = n1 / n2;
  }

  document.getElementById("output").innerHTML = "Total is: " + result;
}

实现2：使用switch case语句 #

将if else逻辑替换为switch，分支逻辑更清晰：

function count(optr) {
  var n1 = parseFloat(document.getElementById("num1").value);
  var n2 = parseFloat(document.getElementById("num2").value);
  if (isNaN(n1) || isNaN(n2)) {
    document.getElementById("output").innerHTML = "请输入有效的数字";
    return;
  }

  let result;
  switch(optr) {
    case '+':
      result = n1 + n2;
      break;
    case '-':
      result = n1 - n2;
      break;
    case '*':
      result = n1 * n2;
      break;
    case '/':
      if (n2 === 0) {
        document.getElementById("output").innerHTML = "除数不能为0";
        return;
      }
      result = n1 / n2;
      break;
    default:
      result = 0;
  }

  document.getElementById("output").innerHTML = "Total is: " + result;
}

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