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) {这导致了问题。

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

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

＆＃13;

<!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>

＆＃13;

替代方法

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案:

替代方法