JavaScript: Made a calculator, but it won't handle decimals.

Anonymous
timer Asked: Jun 3rd, 2013
account_balance_wallet $5

Question Description

Hi all, was wondering if I could get a spot of help here. I'm not a JavaScript coder, but I've been tasked with updating the website at my first job and I'm trying to make a good impression. I've been researching, but have run into a wall with something that I'm sure would be considered embarrassingly simple. If anyone could give me some tips as to what I'm doing wrong, I'd love them forever.

Basically, I need to add a sort of shopping-cart calculator to the site. There's a list of products, and beside each product, a "Quantity" field. The calculator knows that Product X is $2.70 and Product Y is $4, so when the user hits the 'calculate total' button, it multiplies each product's price by its quantity, adds them all up, and gives a total figure.

That's it. Simple, right? 

Well, here's what I've done so far. Here's the first section, which defines the Cal function.

Code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Cal(obj){
 var args=Cal.arguments,frm=args[0].form,nu,tot=0;
 var values=[];
 for (var ip,z0=1;z0<args.length-1;z0++){
  ip=frm[args[z0]];
  ip.value=ip.value.replace(/\D/g,'');
  values.push([ip.value,ip.parentNode.className]);
 }
 if (values[0][0].length>0){
  nu=values[0][0];
  tot=nu*values[0][1];
  for (var z1=1;z1<values.length;z1++){
   if (values[z1][0]){
    tot+=values[z1][0]*values[z1][1]*nu
   }
  }
 }
 frm[args[args.length-1]].value='

And here's the form itself. The top part lists the products (only two, to keep the illustration simple) and the bottom part is the Calculate Totals button.

Code:

<form>
<table width="100%">
<tr><td>Product One</td>
	<td style="text-align:right;"><span class="55">	Qty:<input name="two" size="5" /></span></td></tr>
<tr><td>Product Two</td>
	<td style="text-align:right;"><span class="84"> Qty:<input name="three" size="5" />/span></td></tr>
<tr><td></td>
<td style="text-align:right;"><input type="button" name="" value="Calculate Total" onmouseup="Cal(this,'two','three','total');" />
<input name="total" /></form></td></tr></table>


Now, what I've got there actually does work perfectly fine -- except that it doesn't calculate decimals, and that's a problem for me. Some of the prices need to be things like $3.70, and that calculator doesn't understand that. 

My initial idea was to simply list all the prices in cents, and have the Cal function divide by 100 as its last step. But I'm not sure how to actually add that to the code -- nothing I've tried works. 

Could anyone tip me off as to how I might do that? I'd be grateful.

+tot; } /*]]>*/ </script>And here's the form itself. The top part lists the products (only two, to keep the illustration simple) and the bottom part is the Calculate Totals button.

Code:

<form>
<table width="100%">
<tr><td>Product One</td>
	<td style="text-align:right;"><span class="55">	Qty:<input name="two" size="5" /></span></td></tr>
<tr><td>Product Two</td>
	<td style="text-align:right;"><span class="84"> Qty:<input name="three" size="5" />/span></td></tr>
<tr><td></td>
<td style="text-align:right;"><input type="button" name="" value="Calculate Total" onmouseup="Cal(this,'two','three','total');" />
<input name="total" /></form></td></tr></table>


Now, what I've got there actually does work perfectly fine -- except that it doesn't calculate decimals, and that's a problem for me. Some of the prices need to be things like $3.70, and that calculator doesn't understand that. 

My initial idea was to simply list all the prices in cents, and have the Cal function divide by 100 as its last step. But I'm not sure how to actually add that to the code -- nothing I've tried works. 

Could anyone tip me off as to how I might do that? I'd be grateful.

This question has not been answered.

Create a free account to get help with this and any other question!

Brown University





1271 Tutors

California Institute of Technology




2131 Tutors

Carnegie Mellon University




982 Tutors

Columbia University





1256 Tutors

Dartmouth University





2113 Tutors

Emory University





2279 Tutors

Harvard University





599 Tutors

Massachusetts Institute of Technology



2319 Tutors

New York University





1645 Tutors

Notre Dam University





1911 Tutors

Oklahoma University





2122 Tutors

Pennsylvania State University





932 Tutors

Princeton University





1211 Tutors

Stanford University





983 Tutors

University of California





1282 Tutors

Oxford University





123 Tutors

Yale University





2325 Tutors