输入值的parseFloat返回NaN

我正在尝试编写一个脚本，用于动态计算用户可编辑的4个输入的总数。输入值的parseFloat返回NaN

我在输入值上使用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>

来源

2016-11-21 Krehem

为什么对TD的ID，而不是输入？ – epascarello

您们给你的细胞（<td>标签）id属性，而不是实际的input领域。

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

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

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

来源

2016-11-21 17:59:09

你正在试图获得的td的值时，就应该将那些td S的内部输入，所以你可以使用：

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>

来源

2016-11-21 18:00:36

输入值的parseFloat返回NaN

回答

相关问题