为什么 JS 无法在计算器应用程序中读取值属性？

Question

我正在制作一个计算器。 Inspector 告诉我它无法在我的 JS 的第 4 行读取 value 的属性。

我已经一行一行地查看了，但我无法弄清楚我做错了什么。我在 YouTube 上关注来自 mmtutus 的 this tutorial。

我检查了每一行，我的代码和他的完全一样。

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;
  }

  document.querySelector("#result").innerHTML = calculate;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <form>
    Value 1: <input type="text" id="value1" /> Value 2:
    <input type="text" id="value2" /> Operator:
    <select>
      <option value="add"> Add </option>
      <option value="min"> Subtract </option>
      <option value="div"> Divide </option>
      <option value="mul"> Multiply </option>
    </select>
    <button type="button" onclick="calc()">Calculate</button>
  </form>

  <div id="result"></div>
</body>

<script src="main.js"></script>

</html>

你能帮我找到问题的根源吗？

Answer 1

您还没有为 'operator' 分配 class- 或 id-name，因此找不到该元素。

为什么 JS 无法在计算器应用程序中读取值属性？

Why JS can't read value property in calculator application?

html

javascript

calculator

为什么 JS 无法在计算器应用程序中读取值 属性？

Why JS can't read value property in calculator application?

html

javascript

calculator

为什么 JS 无法在计算器应用程序中读取值属性？