Calculator Help

Dremmel45

New Member
Can anyone point me in the right direction. I have 2 simple calculators on my web page that i want to compute different values. At the moment they return the same value even though base number is different. I would also like to have the option to imput area as a value as well as calculated. I am very new to web design and apologise in advance if this is an elementry problem. Code I have written as follows:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function compute(form) {
var areacalc = (form.length.value * form.width.value) *1;
var costcalc = areacalc * 10;
areacalc = twoDecs(areacalc);
costcalc = twoDecs(costcalc);
form.area.value = areacalc;
form.cost.value = costcalc;
}
function twoDecs(item) {
return eval(parseInt(item * 100) * .01);
}
// End -->
</script>
</HEAD>

<html>
<body>
<form>
<table border="10"
bgcolor="lightblue">
<tr><td>Length </td><td><input type=text name=length size=1> m</td></tr><tr><td>Width </td><td><input type=text name=width size=1> m</td></tr>
<tr><td colspan=2 align=center><input type=button value="Calculate Area & Cost" onClick="compute(this.form)"></td></tr>
<tr><td>Area </td><td><input type=text name=area size=5> sqm</td></tr>
<tr><td>£<input type=text name=cost size=5></td></tr>
<tr>
<td colspan=2 align=center><input type=reset></td></tr>
</table>
</form>
</body>
</html>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function compute(form) {
var areacalc = (form.length.value * form.width.value) *1;
var costcalc = areacalc * 50;
areacalc = twoDecs(areacalc);
costcalc = twoDecs(costcalc);
form.area.value = areacalc;
form.cost.value = costcalc;
}
function twoDecs(item) {
return eval(parseInt(item * 100) * .01);
}
// End -->
</script>
</HEAD>

<html>
<body>
<form>
<table border="10"
bgcolor="lightblue">
<tr><td>Length </td><td><input type=text name=length size=1> m</td></tr><tr><td>Width </td><td><input type=text name=width size=1> m</td></tr>
<tr><td colspan=2 align=center><input type=button value="Calculate Area & Cost" onClick="compute(this.form)"></td></tr>
<tr><td>Area </td><td><input type=text name=area size=5> sqm</td></tr>
<tr><td>£<input type=text name=cost size=5></td></tr>
<tr>
<td colspan=2 align=center><input type=reset></td></tr>
</table>
</form>
</body>
</html>
 

adamblan

New Member
Looks Like your html is poorly formed - you have 2 head & 2 html tags! Try this instead:

<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function compute(form) {
var areacalc = (form.length.value * form.width.value) *1;
var costcalc = areacalc * 10;
areacalc = twoDecs(areacalc);
costcalc = twoDecs(costcalc);
form.area.value = areacalc;
form.cost.value = costcalc;
}
function twoDecs(item) {
return eval(parseInt(item * 100) * .01);
}
// End -->
</script>
</HEAD>

<body>

<form>
<table border="10" bgcolor="lightblue">
<tr><td>Length </td><td><input type=text name=length size=1> m</td></tr><tr><td>Width </td><td><input type=text name=width size=1> m</td></tr>

<tr><td colspan=2 align=center><input type=button value="Calculate Area & Cost" onClick="compute(this.form)"></td></tr>
<tr><td>Area </td><td><input type=text name=area size=5> sqm</td></tr>
<tr><td>£<input type=text name=cost size=5></td></tr>
<tr>
<td colspan=2 align=center><input type=reset></td></tr>
</table>
</form>

<form>
<table border="10"bgcolor="lightblue">
<tr><td>Length </td><td><input type=text name=length size=1> m</td></tr><tr><td>Width </td><td><input type=text name=width size=1> m</td></tr>

<tr><td colspan=2 align=center><input type=button value="Calculate Area & Cost" onClick="compute(this.form)"></td></tr>
<tr><td>Area </td><td><input type=text name=area size=5> sqm</td></tr>
<tr><td>£<input type=text name=cost size=5></td></tr>
<tr>
<td colspan=2 align=center><input type=reset></td></tr>
</table>
</form>

</body>
</html>
 

Dremmel45

New Member
Thank you for the help. Apologies for the way it looked but this has not solved my problem. I still have two caculators but only one calculation be done.
 
Top