我的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）。

ReferenceError：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>

Answer 2

对此。您必须使用以下引号。

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
}

Answer 3

在使用id时，您需要在document.querySelector()周围加上引号。另外，请确保您的变量名是一致的。请记住，变量名称区分大小写。例如，您命名了一个变量Calculate，但尝试使用未定义的calculate对其进行调用。除非在id或class中使用特殊字符，例如#（对于id）和.（对于class），否则绝对不要您可以使用反斜杠（\）或双反斜杠（\\）对其进行转义。您不应该将div与id一起使用#results，只需使其id results即可。

<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>
<script>
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(!document.querySelector("#value1").value.trim().length||!document.querySelector("#value2").value.trim().length){
  document.querySelector("#results").innerHTML = "<b style='color: red;'>You must enter both operands!</b>"
  } else {
  if (op == "add") {
    Calculate = a + b;
  } else if (op == "min") {
    Calculate = a - b;
  } else if (op == "div") {
    Calculate = a / b;
  } else if (op == "mul") {//should be "mul", not "min" which is undefined
    Calculate = a * b;
  }
  document.querySelector("#results").innerHTML = Calculate;//you must capitalize 'Calculate' or it is undefined
 }
}
document.querySelector('#value2').addEventListener("keyup", function(event){
  if(event.keyCode==13){//calculate when Enter is pressed in input#value2
   calc();
  }
});
</script>