ParseFloat去的NaN

Question

大家好，我有總金額的代碼

function computeChange(){ 
var change; 
var amountDue = parseFloat(document.getElementById("amountDue").value); 
var amountReceive = parseFloat(document.getElementById("amountReceive").value); 
change = amountReceive - amountDue; 
document.getElementById('amountChange').innerHTML = change; 
} 



<td>Total Amount</td> 
<td>Php:<span id="amountDue"><?php echo $sum; ?></span></td> 
</tr> 
<tr> 
<td>Amount Paid</td> 
<td><input type="number" id="amountReceive" required="required" maxlength="4" size="4" onKeyUp="computeChange()"></td> 
</tr> 
<tr> 
<td>Change</td> 
<td>Php:<span id="amountChange"></span></td> 
</tr> 

是一個十進制
的支付金額輸入類型=文本

所以問題是，如果我在輸入的東西文本框的變化範圍變爲NaN

Answer 1

#amountDue是一個<span>元素，所以它沒有value屬性。

使用.innerHTML來獲取其內容。

var amountDue = parseFloat(document.getElementById("amountDue").innerHTML); 

Answer 2

parseFloat(document.getElementById("amountDue").value); 

是技術上等同於

parseFloat(undefined); 

其產生的價值NaN因爲跨度元素沒有一個名爲.value屬性。也許你想要.innerHTML？

parseFloat(document.getElementById("amountDue").innerHTML); 

Answer 3

這將不會返回值：

 document.getElementById("amountDue").value 

爲amountDue不是一個HTML input元素。

如下嘗試：

 document.getElementById("amountDue").innerHTML; 

即

var amountDue = parseFloat(document.getElementById("amountDue").innerHTML); 

Answer 4

amountDue的value正在恢復undefined，導致parseFloat返回NaN 使用innerHTML代替。更改此行

var amountDue = parseFloat(document.getElementById("amountDue").value); 

到

var amountDue = parseFloat(document.getElementById("amountDue").innerHTML);