时间戳

首页 > 解决方案 > 为什么我只在 Javascript 计算器中的减号运算符中看到 NaN？

javascript - 为什么我只在 Javascript 计算器中的减号运算符中看到 NaN？

问题描述

我最近做了一个计算器，它工作正常，直到当我计算减号运算符的结果时 NaN 开始出现。我正在测试代码，它很好，然后我重新加载了选项卡，突然 NaN 开始出现在减号运算符中。请告诉为什么会发生这种情况以及如何解决它。

      function btn001() {
        var firstNumber1 = firstNumber.value;
        var operator1 = operator.value;
        var secondNumber1 = secondNumber.value;
        if (operator1 == "-") {
          document.getElementById("result").innerHTML = "=" + firstNumber1- secondNumber1;
        }
        else if (operator1 == "+") {
          document.getElementById("result").innerHTML = "=" + firstNumber1+secondNumber1;
        }
        else if (operator1 == "/") {
          document.getElementById("result").innerHTML = "=" + firstNumber1/secondNumber1;
        }
        else if (operator1 == "*") {
          document.getElementById("result").innerHTML = "=" + firstNumber1*secondNumber1;
        }
        else if (operator1 == "Ũ") {
          document.getElementById("result").innerHTML = "=" + firstNumber1*secondNumber1;
        }
        else if (operator1 == "ũ") {
          document.getElementById("result").innerHTML = "=" + firstNumber1/secondNumber1;
        }
        else  {
          document.getElementById("result").innerHTML = "Error 414! " + "Invalid Operator or value";
        }
      }
      body {
        background-color: green;
      }
      .operator {
        width: 160px;
        height: 60px;
        font-size: 40px;
      }
      .button {
        font-size: 40px;
        background-color: white;
      }
      .button:hover {
        font-size: 41px;
        background-color: yellow;
      }
      .values {
        height: 60px;
        width: 760px;
        font-size: 40px;
      }
      .result {
        width: 1300px;
        height: 190px;
        border: 5px solid yellow;
        text-align: center;
        border-radius: 80px;
        color: white;
        font-size: 90px;
      }
<!DOCTYPE html>
<html>
  <head>
    <title> Calculate it! </title>
  </head>
  <body>
    <input type="number" id="firstNumber" placeholder="First value" class="values"> <br>
    <input type="text" id="operator" placeholder="operator" class="operator"><br>
    <input type="number" id="secondNumber" placeholder="Second value" class="values"> <br> <br>
    <button onclick="btn001()" id="submit" class="button"> Calculate Result </button> <br> <br>
    <p id="result" class="result">0</p>
  </body>
</html>

标签： javascriptnan

解决方案

和运算/符*正在工作，因为变量会自动转换为 int，并且此操作在求和之前执行。

当您将任何内容添加到字符串时，其余部分将被转换为字符串，因此仅将它们转换为 int 是不够的（因为您将有类似"=" + 10 + 20witch 的东西将被转换，"=" + "10" + 20 = "=10" + "20"或者 if is -then 将是"=" + "10" - 20并且"=10" - 20仍然不是数字.

为了使其工作转换数字并使用括号。所以像：

  function btn001() {
    var firstNumber1 = +firstNumber.value;
    var operator1 = operator.value;
    var secondNumber1 = +secondNumber.value;
    if (operator1 == "-") {
      document.getElementById("result").innerHTML = "=" + (firstNumber1- secondNumber1);
    }
    else if (operator1 == "+") {
      document.getElementById("result").innerHTML = "=" (firstNumber1+secondNumber1);
    }
...

您还可以用函数替换+from var firstNumber1 = +firstNumber.value;和（作为另一个响应；它也可以正常工作）。但是你需要括号。var secondNumber1 = +secondNumber.value;parseInt

推荐阅读