Jump to content

Simple maths goes wrong


mike_g
 Share

Recommended Posts

Hi! I'm kinda new to javascript and i'm trying to make a little prog that lets you add stuff to a shopping cart. Its done using a form with checkboxes. Now what I got works but sometimes the output in the total box is wrong. Usually after selecting, and deselecting several items. EG: selecting rompersuit and deodorant, then delselecting them both results in a total of -1.776356. The numbers it comes up with are weird and I've got no idea where they come from o_O Heres my code:

<html><head><script language="JavaScript" type="text/javascript">function ADD(name,cost){ 	  var sum = eval(document.ShopForm.total.value);		if (name == true)	 sum = sum + cost;		else		 				 			sum = sum - cost;		document.ShopForm.total.value=sum;		}</script><title>Untitled</title></head><body><form name="ShopForm">			<table>						 <tr>						 		 <td>Helmet</td>								 						 		 <td>$27.50</td>							 		 <td><input type='checkbox' name='helmet'  onchange='ADD(document.ShopForm.helmet.checked, 27.50)'/></td>								 </tr>						 <tr>						 		 <td>Guinea pig</td>								 						 		 <td>$24.00</td>							 		 <td><input type='checkbox' name='guineapig'  onchange='ADD(document.ShopForm.guineapig.checked, 24.00)'/></td>										 </tr>						 <tr>						 		 <td>Trike</td>								 						 		 <td>$135.95</td>							 		 <td><input type='checkbox' name='trike'  onchange='ADD(document.ShopForm.trike.checked, 135.95)'/></td>										 </tr>						 <tr>						 		 <td>Hacksaw</td>								 						 		 <td>$12.50</td>							 		 <td><input type='checkbox' name='hacksaw'  onchange='ADD(document.ShopForm.hacksaw.checked, 12.50)'/></td>										 </tr>						 <tr>						 		 <td>Rompersuit</td>								 						 		 <td>$29.99</td>							 		 <td><input type='checkbox' name='rompersuit'  onchange='ADD(document.ShopForm.rompersuit.checked, 29.99)'/></td>										 </tr>						 <tr>						 		 <td>Deodorant</td>								 						 		 <td>$3.99</td>							 		 <td><input type='checkbox' name='deodorant'  onchange='ADD(document.ShopForm.deodorant.checked, 3.99)'/></td>										 </tr>						 <tr>						 		 <td>Total</td>						 		 <td><input size=6 name='total' value='0'></td>  						 </tr>			</table></form></body></html>

Anyone know whats going wrong? Cheers.

Link to comment
Share on other sites

I changed onchange to onclick so you get an instant result and I rounded the sum to 2 decimal places when writting it back to the input field.

<html><head><script language="JavaScript" type="text/javascript">function ADD(name,cost){	  var sum = eval(document.ShopForm.total.value);		if (name == true)	 sum = sum + cost;		else									  sum = sum - cost;		document.ShopForm.total.value= Math.round(sum*100)/100;		}</script><title>Untitled</title></head><body><form name="ShopForm">			<table>						 <tr>								  <td>Helmet</td>																  <td>$27.50</td>									  <td><input type='checkbox' name='helmet'  onclick='ADD(document.ShopForm.helmet.checked, 27.50)'/></td>								 </tr>						 <tr>								  <td>Guinea pig</td>																  <td>$24.00</td>									  <td><input type='checkbox' name='guineapig'  onclick='ADD(document.ShopForm.guineapig.checked, 24.00)'/></td>										 </tr>						 <tr>								  <td>Trike</td>																  <td>$135.95</td>									  <td><input type='checkbox' name='trike'  onclick='ADD(document.ShopForm.trike.checked, 135.95)'/></td>										 </tr>						 <tr>								  <td>Hacksaw</td>																  <td>$12.50</td>									  <td><input type='checkbox' name='hacksaw'  onclick='ADD(document.ShopForm.hacksaw.checked, 12.50)'/></td>										 </tr>						 <tr>								  <td>Rompersuit</td>																  <td>$29.99</td>									  <td><input type='checkbox' name='rompersuit'  onclick='ADD(document.ShopForm.rompersuit.checked, 29.99)'/></td>										 </tr>						 <tr>								  <td>Deodorant</td>																  <td>$3.99</td>									  <td><input type='checkbox' name='deodorant'  onclick='ADD(document.ShopForm.deodorant.checked, 3.99)'/></td>										 </tr>						 <tr>								  <td>Total</td>								  <td><input size=6 name='total' value='0'></td>  						 </tr>			</table></form></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...