輸入值的parseFloat返回NaN
[英]parseFloat of input value returns NaN
問題描述
我正在嘗試編寫一個腳本，該腳本根據用戶可編輯的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>
2 個解決方案
解決方案1
1 已采納 2016-11-21 17:59:09
您是在給單元格（ <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>
解決方案2
0 2016-11-21 18:00:36
當您應將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 在附加到 ref 的 componentDidMount 函數中返回 NaN
[英]parseFloat returns NaN in componentDidMount function attached to ref
為什么parseInt（Infinity）返回NaN而parseFloat（Infinity）返回無限？
[英]Why parseInt(Infinity) returns NaN and parseFloat(Infinity) returns infinity?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.