尝试使用从 JS 中的文本框中检索到的数字进行计算时接收 NaN

Question

我正在尝试用 javascript 制作一个简单的计算器。但是，每当我单击加、减、乘或除按钮时，我都会得到结果 NaN。但是，我知道这些数字已成功检索，因为如果我输入该代码，我可以发出警报（input1，input2）。但是，我不明白为什么它不允许我对这两个变量进行操作。我在 JS 控制台中没有收到任何错误。

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

<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="calculator.css" />
  <script>
    var input1, input2

    function getNumbers() {
      input1 = Number(document.getElementById("imp1").value);
      input2 = Number(document.getElementById("imp2").value);
    }

    function sum(input1, input2) {
      getNumbers();
      var sum = input1 + input2;
      alert(sum);
    }

    function diff(input1, input2) {
      getNumbers();
      var diff = input1 - input2;
      alert(diff);
    }

    function prod(input1, input2) {
      getNumbers();
      var prod = input1 * input2;
      alert(prod);


    }

    function quot(input1, input2) {
      getNumbers();
      var quot = input1 / input2;
      alert(quot);
    }
  </script>


  <div id="calc">
    <form name="calc_input">
      <input type="text" id="imp1" />
      <input type="text" id="imp2" />
      <!-- buttons -->
      <button onclick="sum()" id="add" value="sum">Add</button>
      <button onclick="diff()" id="subtract" value="diff">Subtract</button>
      <button onclick="prod()" id="multiply" value="prod">Multiply</button>
      <button onclick="quot()" id="divide" value="quot">Divide</button>

    </form>
  </div>

</head>

</html>

Answer 1

function sum(input1, input2) { 这会导致问题。

这里的参数将优先于全局变量，因为你没有传递任何值，它们将保持undefined，因此保持NaN

您所要做的就是删除这些参数，因为您希望使用全局变量。

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

<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="calculator.css" />
  <script>
    var input1, input2

    function getNumbers() {
      input1 = Number(document.getElementById("imp1").value);
      input2 = Number(document.getElementById("imp2").value);
    }

    function sum() {
      getNumbers();
      var sum = input1 + input2;
      alert(sum);
    }

    function diff() {
      getNumbers();
      var diff = input1 - input2;
      alert(diff);
    }

    function prod() {
      getNumbers();
      var prod = input1 * input2;
      alert(prod);


    }

    function quot() {
      getNumbers();
      var quot = input1 / input2;
      alert(quot);
    }
  </script>


  <div id="calc">
    <form name="calc_input">
      <input type="text" id="imp1" />
      <input type="text" id="imp2" />
      <!-- buttons -->
      <button onclick="sum()" id="add" value="sum">Add</button>
      <button onclick="diff()" id="subtract" value="diff">Subtract</button>
      <button onclick="prod()" id="multiply" value="prod">Multiply</button>
      <button onclick="quot()" id="divide" value="quot">Divide</button>

    </form>
  </div>

</head>

</html>

替代方法

• 您可以删除全局变量并从getNumbers 返回一个数字数组。通过使用复合选择器而不是 ID 创建通用模式来获取输入，您可以添加/删除任意数量的输入。
• 您可以使用通用函数来处理输入，因为所有输入的结构都相同。
• 接受操作员并进行相应处理。

function getNumbers() {
  var inputs = document.querySelectorAll('form[name="calc_input"] input[type="text"]');
  var nums = [];
  for(var i = 0; i< inputs.length; i++){
    nums.push(Number(inputs[i].value))
  }
  return nums;
}

function operate(operator){
  var nums = getNumbers();
  var result = nums.reduce(function(p,c){
    switch(operator){
      case "+": return p+c;
      case "-": return p-c;
      case "*": return p*c;
      case "/": return p/c
    }
  })
  alert(result);
}

<div id="calc">
  <form name="calc_input">
    <input type="text" id="imp1" />
    <input type="text" id="imp2" />
    <!-- buttons -->
    <button onclick="operate('+')" id="add" value="sum">Add</button>
    <button onclick="operate('-')" id="subtract" value="diff">Subtract</button>
    <button onclick="operate('*')" id="multiply" value="prod">Multiply</button>
    <button onclick="operate('/')" id="divide" value="quot">Divide</button>
  </form>
</div>

Answer 2

你必须将你的所有变量传递给整数。它现在显示为一个字符串，这就是为什么它不能按你想要的那样计算。这里是你可以检查的代码......

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

<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="calculator.css" />
  <script>


    function sum(input1, input2) {
      input1 = Number(document.getElementById("imp1").value);
  input2 = Number(document.getElementById("imp2").value);
      var sum = parseInt(input1) + parseInt(input2);
      alert(sum);
    }


  </script>


  <div id="calc">
    <form name="calc_input">
      <input type="text" id="imp1" />
      <input type="text" id="imp2" />
      <!-- buttons -->
      <button onclick="sum()" id="add" value="sum">Add</button>
      <button onclick="diff()" id="subtract" value="diff">Subtract</button>
      <button onclick="prod()" id="multiply" value="prod">Multiply</button>
      <button onclick="quot()" id="divide" value="quot">Divide</button>

    </form>
  </div>

</head>

</html>