輸入值的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

回答

相關問題