输入值的 parseFloat 返回 NaN答案

【问题标题】：parseFloat of input value returns NaN输入值的 parseFloat 返回 NaN
【发布时间】：2016-11-21 17:56:19
【问题描述】：

我正在尝试编写一个脚本，该脚本可以根据用户可编辑的 4 个输入动态计算总数。

我在输入值上使用 parseFloat 时遇到了一些麻烦。他们以NaN 的形式返回。

到目前为止，我已经尝试使用parseInt 代替parseFloat，使用.val() 代替.value，使用name 属性而不是id 属性，以及其他一些东西，即我不记得了。

我还没有看到任何其他类似问题的答案，这对我有用，所以如果你不介意看看我的代码，看看我可能哪里出错了，我将不胜感激.谢谢！

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title>Calc</title>
<style>
 
</style>   
</head>

<body>
   <table width = "250" border="1">
      <tr>
        <th align="left">A</th>
        <th align="left">B</th>
      </tr>
      <tr>
        <td>Rent</td>
        <td id="rent" align="right">
           <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <td>Food</td>
        <td id="food" align="right">
           <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <td>Entertainment</td>
        <td id="ent" align="right">
           <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <td>Transportation</td>
        <td id="trans" align="right">
           <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <th align="left">Total</th>
        <td id="total" align="right"></td>
      </tr>
   </table>
   <script>
      function calc() {
         var w = parseFloat(document.getElementById("rent").value);
         var x = parseFloat(document.getElementById("food").value);
         var y = parseFloat(document.getElementById("ent").value);
         var z = parseFloat(document.getElementById("trans").value);
         
         document.getElementById("total").innerHTML=w+x+y+z;
      }
   </script>
</body>
</html>

【问题讨论】：

为什么TD上是id而不是input？

标签： javascript user-input nan parseint parsefloat

【解决方案1】：

你给你的单元格（<td> 标签）id 属性，而不是你实际的input 字段。

将id 属性移动到input 元素可以解决问题。

此外，由于您将重复调用 calc 函数，因此只需扫描一次文档以获取对您将要反复使用的元素的引用会更有意义。

最后，最好不要将您的 HTML 元素与当 HTML 本身发生事件时应该触发的 JavaScript 函数挂钩。您可以在我的代码 sn-p 中看到我是如何从 HTML 中删除它并将其放入 JavaScript 中的。

// Wait until the DOM is fully loaded
window.addEventListener("DOMContentLoaded", function(){
  
   // Declare and initialze variable references to needed elements:
   var wElement = document.getElementById("rent");
   var xElement = document.getElementById("food");
   var yElement = document.getElementById("ent");
   var zElement = document.getElementById("trans");

   // Wire elements to event handlers:
   wElement.addEventListener("change", calc);
   xElement.addEventListener("change", calc);
   yElement.addEventListener("change", calc);
   zElement.addEventListener("change", calc);

   // Event handler:
   function calc() {
         var w = parseFloat(wElement.value);
         var x = parseFloat(xElement.value);
         var y = parseFloat(yElement.value);
         var z = parseFloat(zElement.value);
         
         document.getElementById("total").textContent = w + x + y + z;
   } 
});

<table width = "250" border="1">
      <tr>
        <th align="left">A</th>
        <th align="left">B</th>
      </tr>
      <tr>
        <td>Rent</td>
        <td  align="right">
           <input type="text" id="rent" size="7" value="0"></td>
      </tr>
      <tr>
        <td>Food</td>
        <td  align="right">
           <input type="text" id="food" size="7" value="0"></td>
      </tr>
      <tr>
        <td>Entertainment</td>
        <td  align="right">
           <input type="text" id="ent" size="7" value="0"></td>
      </tr>
      <tr>
        <td>Transportation</td>
        <td  align="right">
           <input type="text" id="trans" size="7" value="0"></td>
      </tr>
      <tr>
        <th align="left">Total</th>
        <td id="total" align="right"></td>
      </tr>
   </table>

【讨论】：

【解决方案2】：

当您应该以tds 中的输入为目标时，您正在尝试获取tds 的值，因此您可以使用：

var w = parseFloat(document.querySelector("#rent input").value);
var x = parseFloat(document.querySelector("#food input").value);
var y = parseFloat(document.querySelector("#ent input").value);
var z = parseFloat(document.querySelector("#trans input").value);

希望这会有所帮助。

function calc() {
  var w = parseFloat(document.querySelector("#rent input").value);
  var x = parseFloat(document.querySelector("#food input").value);
  var y = parseFloat(document.querySelector("#ent input").value);
  var z = parseFloat(document.querySelector("#trans input").value);

  document.getElementById("total").innerHTML=w+x+y+z;
}

<!DOCTYPE HTML>

<html>
  <head>
    <meta charset="utf-8">
    <title>Calc</title>
    <style>

    </style>   
  </head>

  <body>
    <table width = "250" border="1">
      <tr>
        <th align="left">A</th>
        <th align="left">B</th>
      </tr>
      <tr>
        <td>Rent</td>
        <td id="rent" align="right">
          <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <td>Food</td>
        <td id="food" align="right">
          <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <td>Entertainment</td>
        <td id="ent" align="right">
          <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <td>Transportation</td>
        <td id="trans" align="right">
          <input type="text" size="7" value="0" onchange="calc()"></td>
      </tr>
      <tr>
        <th align="left">Total</th>
        <td id="total" align="right"></td>
      </tr>
    </table>
  </body>
</html>

【讨论】：