Javascript 输出在不应该显示的时候显示 NaN

Question

你好，我写了一些代码，让用户输入摄氏度值，然后程序将其转换为华氏度。我不确定为什么尝试时输出显示 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>

Answer 1

这是因为您没有将值传递给 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）。

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

Answer 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);
      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() 方法

Answer 4

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

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

Javascript 输出在不应该显示的时候显示 NaN

Javascript output shows NaN when it shouldn't

javascript

nan