javascript - 我的 javascript 代码的语法错误

Question

下面列出了我的计算器 html 表单。

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 == "min") {
    Calculate = a * b;
  }
  document.querySelector(#results).innerhtml = calculate
}

<form>
  value 1: <input type="text" id="value1"> value 2: <input type="text" id="value2"> Operator:
  <select id="operator">
    <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=#results></div>

我在这里收到一个语法错误；

var a = parseInt(document.querySelector(#value1).value);

Answer 1

这段代码有几个问题。

语法错误

第一个(以及报告的错误)是 document.querySelector 期望一个 String 作为它的参数。要解决此问题，您只需在选择器周围加上引号 ( ')。

所以任何地方你都有这样的东西:

 document.querySelector(#results);

应该是

 document.querySelector('#results');

正确设置属性innerHTML

此外，在元素上设置 HTML 的正确属性是 innerHTML (不是 innerhtml )。

引用错误:calculate未定义

JavaScript 是 case-sensitive , 所以当你定义 var Calculate;上面并尝试引用 calculate (小写 c )，你会得到一个错误。这可能只是一个错字，所以你只需要使用 Calculate (大写 C )。

错误的 ID 值

在您的 HTML 中，您将结果 div 设置为<div id="#results"></div> .您可能不想在 ID 本身中包含哈希符号 ( # )。在利用 ID selector 时使用.

如果您确实将井号保留为 ID 的实际部分，则需要在 JavaScript 中使用类似于 document.querySelector('#\\#results') 的内容将其转义。这可能不是您想要的。

相反，只需更改 HTML 以从实际 ID 值中删除散列:

<div id="results"></div>

mul 缺少逻辑运营商

您的 JavaScript 有一个错误:您引用了 if (op == 'min')两次。最后一个条件可能应该是 if (op == 'mul')如果您希望代码正确执行。

完整解决方案

应用上述所有修复后，您的最终代码应如下所示:

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("#results").innerHTML = Calculate;
}

<form>
  value 1: <input type="text" id="value1">
  value 2: <input type="text" id="value2">
  Operator:
  <select id="operator">
    <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="results"></div>