# Thread: attempt at calculator

1. ## attempt at calculator

Sorry guys but js aint a strong point, I could do this in php but I want it as a pop-up, although I aint got that figured out yet either.

Heres what I am trying to do:
Original value input: 1
Plus 10% : 1.10
Add new value input eg: 0.50
new total: 1.60
Plus 10% : 1.76

Code:
```<html>
<title>Total Calculator</title>
<SCRIPT language=JavaScript>
<!--
function newtotal() {
var a = document.form1.a.value;
var b = document.form1.b.value;
c = a/10;										 // original value divided by 10
d = a+c;										  // original value + 10%
e = d+b;										 //  new value plus original	parseInt(eat);
f = e/10;										 // new value divided by 10
g = e+f;										  // new total
document.form1.total1.value = g
}
//-->
</SCRIPT>
<body>
<center>
<b><h3>Only on monday</h3></b>
<p>
<FORM name=form1>
<TABLE cellSpacing=1 cellPadding=1 border=1>
<TBODY>
<TR>
<TD align=middle colSpan=3><B><FONT size=4>Total Calculator</FONT></B>
</TD>
<TR>
<TD>You have<INPUT size=5 name=a> Your increase<INPUT size=5 name=b>?</TD>
<TD>Answer: <INPUT maxLength=40 size=20 name=total1></TD>
<TD><INPUT onclick=newtotal() type=button value=Calculate></TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</center>
</body>
</html>```

2. A couple of things;
1. You should always start with valid markup. You were using deprecated elements thus making it more difficult for the browser to do it's job
2. You're taking too many steps in your JavaScript to do the math. I've reduced it to 2 steps, but it can be reduced to just 1
3. I explicitly declared the variables coming from the form as Numbers. (That doesn't preclude someone from entering letters)

Take a look:
HTML Code:
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Total Calculator</title>
<script type="text/javascript">
function newtotal() {
var a = Number(document.form1.a.value);
var b = Number(document.form1.b.value);
var c = a * 1.1; // orig + 10%
var d = (c + b) * 1.1; //new + increase + 10%
document.form1.total1.value = d;
}
</script>
<style type="text/css">
table {
border-collapse:collapse;
}
td {
border:thin solid #000;
}
</style>
<body>
<div align="center">
<h3>Only on monday</h3>
<form name="form1" id="form1" action="" method="get">
<table>
<tbody>
<tr>
<td colspan="3"><h3>total calculator</h3></td>
</tr>
<tr>
<td>You Have<input type="text" size="5" name="a" id="a" />&nbsp;Your Increase:<input type="text" size="5" name="b" id="b" />?</td>
<td>Answer:<input maxlength="40" size="20" name="total1" id="total1" /></td>
<td><input name="calc" type="button" id="calc" onclick="newtotal();" value="Calculate" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>```
You could reduce the calculation to just one line:
var c = ( ((a * 1.1) + b) * 1.1 );
or even better:
document.getElementById("result1") = ( ((a * 1.1) + b) * 1.1 );

3. Thanks dude, its one ugly looking calculator in appearance but I'll tidy it up later.

I'm doing a js tut now to refresh at much as is possible.

Cant show me how to get it to round up to two digits, eg 18.77
At the moment I'm getting 18.7600000002 or something to that effect

4. use Math.round(number)

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•