Thread: Embarrassingly simple: getting a calculator to include decimals?

1. Registered User
Join Date
Jun 2013
Posts
3

Embarrassingly simple: getting a calculator to include decimals?

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 embarrassingyl 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. I added comments for each section so it'd be clear what I'm trying (and failing) to do. http://pastebin.com/raw.php?i=Cd60NY8R

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.

2. Registered User
Join Date
Jun 2013
Posts
3
I've only just realised that what I pasted here isn't the actual code, but rather the replacement code I tried to use to fix the problem unsuccessfully. I can't believe I didn't check it.

Here's the actual code that describes the Cal function.

3. Show all the pertinent code for the calculator function.
Or provide a link to the site where the problem exists.

4. since naming rules of the class attribute are (read here HTML class Attribute):

• Must begin with a letter A-Z or a-z
• Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
• In HTML, all values are case-insensitive

your 'price spans' class attributes must look like, for example, p10_25 where 'p' means nothing and will be removed later in the function and '_' stands for a dot if the price contains decimals. try this:

Code:
```<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>123</title>
<!-- Javascript for the calcualtor's Cal function -->
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function Cal(frm){
document.getElementsByName('total')[0].value='';
var elems=frm.elements,total=0,dig=/[\d]{1,}/;
for(var i=0; i<elems.length; i++){
if(elems[i].type==='text' && dig.test(elems[i].value)){
var price=new Number(elems[i].parentNode.className.replace(/p/g,'').replace(/_/g,'.')),
val=new Number(elems[i].value);
total+=isFinite(price*val)?(price*val):0;
}
else{continue;}
}
document.getElementsByName('total')[0].value='\$'+total;
}
/*]]>*/
</script>
<body>
<!-- Actual form, where 'class' is the price. Each row has the product name in one table cell, and then the quantity input in the next cell. -->
<form>
<table align="center" width="50%">
<tbody>
<tr><td>Product One</td><td style="text-align:right;"><span class="p10">Qty: <input type="text" name="one" size="5" value="" /></span></td></tr>
<tr><td>Product Two</td><td style="text-align:right;"><span class="p20">Qty: <input type="text" name="two" size="5" value="" /></span></td></tr>
<tr><td>Product Three</td><td style="text-align:right;"><span class="p10_25">Qty: <input type="text" name="three" size="5" value="" /></span></td></tr>
<tr><td>Product Four</td><td style="text-align:right;"><span class="p_25">Qty: <input type="text" name="four" size="5" value="" /></span></td></tr>

<!-- Calculate button -->

<tr>
<td></td>
<!--td style="text-align:right;"><input type="button" name="" value="Calculate Total" onmouseup="Cal(this,'two','three','total');" /><input name="total" /-->
<td style="text-align:right;"><input type="button" name="" value="Calculate Total" onmouseup="Cal(this.form);" /><input name="total" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>```

5. Registered User
Join Date
Sep 2007
Posts
390
Code:
```
<!DOCTYPE html>
<html>
<style>
/*
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_color
*/
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
<script type="text/javascript">
// http://www.w3schools.com/css/css_table.asp
// http://www.w3schools.com/html/html_tables.asp
// http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2
// http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody
// http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_colgroup_test
// http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_elements
// http://www.w3schools.com/jsref/prop_html_classname.asp
// http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

var prd = ['x','y'];
var prc = ['xPrice','yPrice'];
var q = [2.70, 4 ];

function calc() {
var total = document.getElementById('total');
var sum = 0;
var i, el, inp;
for(i=0; i< prd.length; i++) {
el  = document.getElementById(prd[i]);
inp = document.getElementById(prc[i]);
inp.value= Number( el.value) * q[i];
sum +=    Number( inp.value );
}
total.value=sum;
}

</script>
<body>

<center>
<table border="1">
<caption><h1>shopping-cart calculator</h1></caption>
<colgroup>

<col style="background-color:gold">
<col span="1" style="background-color:#ece;">
<col span="1" style="background-color:#afa;">
</colgroup>
<tr>
<th>product</th>
<th>price</th>
<th>quantity</th>
<th>Kasa</th>

</tr>
<tfoot style="font-weight:bold; color:red; background-color:#aba;">
<tr>
<td>Sum</td>
<td></td>
<td></td>
<td style="text-align: right;"><input type="button" value="calculate" onclick="calc()"><br><input type="text" id="total" name="total" size="5" readonly></td>
</tr>

</tfoot>
<tbody>
<tr>
<td> x </td>
<td>\$2.70</td>
<td><input type="text" id="x" name="x" size="5" ></td>
<td style="text-align: right;"><input type="text" id="xPrice" value="" name="xMultiple" size="5" readonly></td>
</tr>
<tr>
<td>y</td>
<td>\$4</td>

<td><input type="text" id="y" name="y" size="5" ></td>
<td style="text-align: right;"><input type="text" id="yPrice" value="" name="yMultiple" size="5" readonly></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>```
Last edited by Ayşe; 06-03-2013 at 02:09 PM.

6. Registered User
Join Date
Jun 2013
Posts
3
That works perfectly! Thanks, Padonak and Ayse, I really really appreciate the help.