基础JavaScript问题：简易计算器无法在HTML页面输出结果

嘿，我明白你现在的困扰——控制台里计算结果明明正常，但HTML页面就是不显示结果对吧？我仔细看了你的代码，找到了问题所在：

核心错误：大小写拼写问题 #

在你的calc()函数最后一行：

document.querySelector("#result").innerHtml = calculate;

这里的innerHtml拼写错了！JavaScript是大小写敏感的，正确的属性名应该是innerHTML（最后一个字母是大写的L）。这个拼写错误导致你无法把计算结果赋值给页面上的result元素，所以页面自然看不到输出。

修正后的JavaScript代码 #

把那行代码改成下面这样就可以正常显示结果了：

function calc(){ 
  var a = parseInt(document.querySelector("#value1").value); 
  var b = parseInt(document.querySelector("#value2").value); 
  var op = document.querySelector("#operator").value; 
  var calculate; 
  if (op == "add") { 
    calculate = a + b; 
  } else if (op == "min"){ 
    calculate = a - b; 
  }else if (op == "div"){ 
    calculate = a / b; 
  }else if (op == "mul"){ 
    calculate = a * b; 
  } 
  console.log(calculate); 
  // 修复拼写错误：innerHtml → innerHTML
  document.querySelector("#result").innerHTML = calculate; 
}

额外优化建议 #

另外，你现在把脚本放在了<head>标签里，虽然当前的onclick方式不会有问题，但有时候可能会因为DOM还没加载完成导致找不到元素的情况。建议把脚本移到<body>标签的末尾，确保所有DOM元素都加载完成后再执行脚本，比如：

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>简易计算器</title>
</head> 
<body> 
  <form> 
    Value 1: <input type="text" name="" value="" id="value1"> 
    Value 2: <input id="value2" type="text" name="" value=""> 
    Operator: 
    <select id="operator" class="" name=""> 
      <option value="add">Add</option> 
      <option value="min">Min</option> 
      <option value="div">Div</option> 
      <option value="mul">Multiply</option> 
    </select> 
    <button type="button" onclick="calc()" name="button">Calculate</button> 
  </form> 
  <div id="result"></div>

  <!-- 把脚本移到这里 -->
  <script src="js/main.js"></script>
</body> 
</html>

这样调整后，你的计算器应该就能正常在页面上显示计算结果啦！

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