输入值的 parseFloat returns NaN

Question

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

我在输入值上使用 parseFloat 时遇到了一些问题。他们 return 为 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>

Answer 1

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

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

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

最后，最好不要将 HTML 元素连接到 JavaScript 函数，当 HTML 本身发生事件时，这些函数应该触发。您可以在我的代码片段中看到我如何将其从 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>

Answer 2

你试图获取 td 的值，而你应该将这些 td 中的输入作为目标，因此你可以使用 :

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>

输入值的 parseFloat returns NaN

parseFloat of input value returns NaN

javascript

user-input

nan

parsefloat

parseint