Javascript 输出不应该显示 NaN答案

【问题标题】：Javascript output shows NaN when it shouldn'tJavascript 输出不应该显示 NaN
【发布时间】：2017-01-17 14:01:00
【问题描述】：

您好，我已经编写了一些代码，以便用户输入摄氏度值，并让程序转换为华氏度。我不确定为什么在尝试时输出显示 NaN。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
    var degFahren;
    var degCent;
    function input_onchange(degCent) {
      degFahren = parseInt((9 / 5) * degCent + 32);
      document.form1.output.value = degFahren;
    }
    </script>
  </head>
  <body>
    <form action="" name="form1" method="post">
        <h3>Type any degrees centigrade and convert it to Fahrenheit.</h3>
        <p>
          Degrees Centigrade:
          <input type="text" name="input" onchange="input_onchange()">
        </p>
        <p>
          Degrees Fahrenheit:
          <input type="text" name="output" readonly="readonly">
        </p>
    </form>
  </body>
</html>

【问题讨论】：

以后，你可以很容易地自己找到答案：使用浏览器内置的全功能调试器在函数的第一条语句上设置断点，然后用它来查看变量等。在the JavaScript tag wiki 中有关于浏览器内置的各种调试器的详细信息的链接。

标签： javascript nan

【解决方案1】：

你在你的函数中请求了一个参数，但你没有传递一个值。我稍微调整了你的代码......它现在应该可以正常工作了:)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
    var degFahren;
    var degCent;
    function input_onchange() {
      var degCent = document.getElementById("input-centigrade").value;
      degFahren = parseInt((9 / 5) * degCent + 32);
      document.form1.output.value = degFahren;
    }
    </script>
  </head>
  <body>
    <form action="" name="form1" method="post">
        <h3>Type any degrees centigrade and convert it to Fahrenheit.</h3>
        <p>
          Degrees Centigrade:
          <input type="text" name="input" id="input-centigrade" onchange="input_onchange()">
        </p>
        <p>
          Degrees Fahrenheit:
          <input type="text" name="output" readonly="readonly">
        </p>
    </form>
  </body>
</html>

【讨论】：

【解决方案2】：

更新了你的代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
    var degFahren;
    var degCent;
    function input_onchange(degCent) {
      degFahren = parseInt((9 / 5) * degCent + 32);
      console.log(degFahren);
      document.form1.output.value = degFahren;
    }
    </script>
  </head>
  <body>
    <form action="" name="form1" method="post">
        <h3>Type any degrees centigrade and convert it to Fahrenheit.</h3>
        <p>
          Degrees Centigrade:
          <input type="text" name="input" onchange="input_onchange(this.value)">
        </p>
        <p>
          Degrees Fahrenheit:
          <input type="text" name="output" readonly="readonly">
        </p>
    </form>
  </body>
</html>

问题是您没有将任何参数传递给input_onchange() 方法

【讨论】：

【解决方案3】：

您应该将输入字段值传递给函数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
    var degFahren;
    var degCent;
    function input_onchange(degCent) {
      degFahren = parseInt((9 / 5) * degCent + 32);
      document.form1.output.value = degFahren;
    }
    </script>
  </head>
  <body>
    <form action="" name="form1" method="post">
        <h3>Type any degrees centigrade and convert it to Fahrenheit.</h3>
        <p>
          Degrees Centigrade:
          <input type="text" name="input" onchange="input_onchange(this.value)">
        </p>
        <p>
          Degrees Fahrenheit:
          <input type="text" name="output" readonly="readonly">
        </p>
    </form>
  </body>
</html>

【讨论】：

【解决方案4】：

这是因为您没有将值传递给您的 input_onchange 方法。像这样更改您的 onchange 属性；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
    var degFahren;
    var degCent;
    function input_onchange(degCent) {
      degFahren = parseInt((9 / 5) * degCent + 32);
      document.form1.output.value = degFahren;
    }
    </script>
  </head>
  <body>
    <form action="" name="form1" method="post">
        <h3>Type any degrees centigrade and convert it to Fahrenheit.</h3>
        <p>
          Degrees Centigrade:
          <input type="text" name="input" onchange="input_onchange(this.value)">
        </p>
        <p>
          Degrees Fahrenheit:
          <input type="text" name="output" readonly="readonly">
        </p>
    </form>
  </body>
</html>

...这里，this 指的是元素本身（input）。

【讨论】：