EdwardMartinIII
Technical User
I should be smarter than this. Really. But this is very weird
I am attempting to tally up a row of text fields. Very simple, right? I use parseFloat on each element.
The code in "Sample.js" is below:
All it does is add the contents of the three fields. This should be a no-brainer.
The HTML code is here:
Now, the trouble occurs when I enter
Item 1 cost 1: 83
Item 1 cost 2 45.67
The item 1 total kicks out 128.67000000000002. The same thing happens when I reverse the arguments (even faulty addition is commutative, evidently). However, if I subtract 1 from either argument (82 instead of 83 or 44.67 instead of 45.67), the answer tallies out fine!
What the holy guacamole's goin' on?
Can anyone tell me what I might be doing wrong here?
Cheers,
Edward ![[monkey] [monkey] [monkey]](/data/assets/smilies/monkey.gif)
"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
I am attempting to tally up a row of text fields. Very simple, right? I use parseFloat on each element.
The code in "Sample.js" is below:
Code:
function BigTally()
{
// tally each subtotal first
document.MainForm.i1total.value=(parseFloat(document.MainForm.i1c1.value)+parseFloat(document.MainForm.i1c2.value)+parseFloat(document.MainForm.i1c3.value));
// now sum the subtotals to the grand total.
document.MainForm.GrandTotal.value=parseFloat(document.MainForm.i1total.value);
}
All it does is add the contents of the three fields. This should be a no-brainer.
The HTML code is here:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<title>JavaScript Sample</title>
<script src="Sample.js" type="text/javascript"></script>
</head>
<body>
<form name="MainForm" action="">
<h3>Tally 'em up!</h3>
<table border="1">
<tr>
<td>item 1 cost 1: <input type="text" value="0" name="i1c1" id="i1c1" size="5" onblur="BigTally();return true;"></input></td>
<td>item 1 cost 2: <input type="text" value="0" name="i1c2" id="i1c2" size="5" onblur="BigTally();return true;"></input></td>
<td>item 1 cost 3: <input type="text" value="0" name="i1c3" id="i1c3" size="5" onblur="BigTally();return true;"></input></td>
<td><strong>item 1 Total:</strong> <input type="text" value="0" name="i1total" id="i1total" size="5" onblur="BigTally();return true;"></input></td>
</tr>
<tr>
<td>item 2 cost 1: <input type="text" value="0" name="i2c1" id="i2c1" size="5" onblur="BigTally();return true;"></input></td>
<td>item 2 cost 2: <input type="text" value="0" name="i2c2" id="i2c2" size="5" onblur="BigTally();return true;"></input></td>
<td>item 2 cost 3: <input type="text" value="0" name="i2c3" id="i2c3" size="5" onblur="BigTally();return true;"></input></td>
<td><strong>item 2 Total:</strong> <input type="text" value="0" name="i2total" id="i2total" size="5" onblur="BigTally();return true;"></input></td>
</tr>
<tr>
<td>item 3 cost 1: <input type="text" value="0" name="i3c1" id="i3c1" size="5" onblur="BigTally();return true;"></input></td>
<td>item 3 cost 2: <input type="text" value="0" name="i3c2" id="i3c2" size="5" onblur="BigTally();return true;"></input></td>
<td>item 3 cost 3: <input type="text" value="0" name="i3c3" id="i3c3" size="5" onblur="BigTally();return true;"></input></td>
<td><strong>item 3 Total:</strong> <input type="text" value="0" name="i3total" id="i3total" size="5" onblur="BigTally();return true;"></input></td>
</tr>
<tr>
<td>item 4 cost 1: <input type="text" value="0" name="i4c1" id="i4c1" size="5" onblur="BigTally();return true;"></input></td>
<td>item 4 cost 2: <input type="text" value="0" name="i4c2" id="i4c2" size="5" onblur="BigTally();return true;"></input></td>
<td>item 4 cost 3: <input type="text" value="0" name="i4c3" id="i4c3" size="5" onblur="BigTally();return true;"></input></td>
<td><strong>item 4 Total:</strong> <input type="text" value="0" name="i4total" id="i4total" size="5" onblur="BigTally();return true;"></input></td>
</tr>
<tr>
<td colspan="4" align="right"><strong>Grand Total: </strong><input type="text" value="0" name="GrandTotal" id="GrandTotal"size="50"></input></td>
</tr>
</table>
</form>
</body>
</html>
Now, the trouble occurs when I enter
Item 1 cost 1: 83
Item 1 cost 2 45.67
The item 1 total kicks out 128.67000000000002. The same thing happens when I reverse the arguments (even faulty addition is commutative, evidently). However, if I subtract 1 from either argument (82 instead of 83 or 44.67 instead of 45.67), the answer tallies out fine!
What the holy guacamole's goin' on?
Can anyone tell me what I might be doing wrong here?
Cheers,
![[monkey] [monkey] [monkey]](/data/assets/smilies/monkey.gif)
![[monkey] [monkey] [monkey]](/data/assets/smilies/monkey.gif)
"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door