Hello everyone i have this code
function puteChange(){
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="puteChange()"></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
Hello everyone i have this code
function puteChange(){
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="puteChange()"></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
- 1 what is entered into the textbox? – Daniel A. White Commented Dec 3, 2012 at 2:32
-
3
amountDue
is aspan
, it doesn't have value. – zerkms Commented Dec 3, 2012 at 2:33 - @DanielA.White THE AMOUNT RECEIVED is entered if you enter it it will trigger the span to diplay values – Mowgli Mecha IV Commented Dec 3, 2012 at 2:33
- @zerkms it will display a value once i enter something into textbox – Mowgli Mecha IV Commented Dec 3, 2012 at 2:35
-
@Mowgli Mecha IV: you don't understand -
span
DOM element doesn't have.value
attribute. Only input fields have. – zerkms Commented Dec 3, 2012 at 2:45
4 Answers
Reset to default 8parseFloat( 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 );
#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);
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);
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);