CODEWITHSUNDEEP
javascript
Mowgli Mecha IV
Mowgli Mecha IV

Reputation: 41

ParseFloat goes NaN

Hello everyone i have this code

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>

on the total amount is a decimal
on the amount paid input type=text

So the problem is if i enter something in the text box the span on change goes NaN

Upvotes: 3

Views: 5123

Answers (4)

Gabriele Petronella
Gabriele Petronella

Reputation: 108121

value of amountDue is returning undefined, causing the parseFloat to return NaN Use innerHTML instead. Change this row

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

to

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

Upvotes: 1

Yogendra Singh
Yogendra Singh

Reputation: 34367

This will not return you the value:

      document.getElementById("amountDue").value

as amountDue is not a HTML input element.

Try below:

     document.getElementById("amountDue").innerHTML;

i.e.

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

Upvotes: 2

David G
David G

Reputation: 96810

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

is technically equivalent to

parseFloat( undefined );

which yields the value NaN because span elements do not have a property named .value. Maybe you wanted .innerHTML?

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

Upvotes: 8

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

#amountDue is a <span> element, so it does not have a value property.

Use .innerHTML to get its contents.

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

Upvotes: 5

Related Questions