Simple Javascript Math Calculator - almost there!
Hi, i am trying to build a simple Javascript mathematical calculator that will do the following on click of a button:
- add numbers from imput textfields
- divide the sum by the number of inputs
- give the average.
Here is my code. Working (gives the rights answer) but only problem i have is that the value in the reponse textfield clears itlsef on the release of the button. But again, the correct value is briefly indicated into the correct textfield.
You can see the page at :
http://www.cazacommunications.com/nonTrad/testCalcl.html
Any clue? Thanks!
- - -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function CalculateSum(Atext, Btext, Ctext, form)
{
var valueA = parseFloat(Atext);
var valueB = parseFloat(Btext);
var valueC = parseFloat(Ctext);
form.reponse.value = (valueA + valueB + valueC) / 3;
}
/* ClearForm: this function has 1 argument: form.
It clears the input and answer fields on the form.
It needs to know the names of the INPUT elements in order
to do this. */
function ClearForm(form)
{
form.valueA.value = "";
form.valueB.value = "";
form.valueC.value = "";
form.reponse.value = "";
}
// end of JavaScript functions -->
</script>
</head>
<body>
<form action="" method="post">
<p>nombre 1
<input name="valueA" type="text" id="a" size="4" maxlength="4" />
</p>
<p>nombre 2
<input name="valueB" type="text" id="b" size="4" maxlength="4" />
</p>
<p>nombre 3
<input name="valueC" type="text" id="c" size="4" maxlength="4" />
</p>
<p>
<input type="submit" name="btnMoyenne" id="btnMoyenne" value="Moyenne" onclick="CalculateSum(this.form.valueA.value, this.form.valueB.value, this.form.valueC.value, this.form)" />
<input name="reponse" type="text" id="reponse" size="4" maxlength="4" />
</p>
<p>
<input type="submit" name="btnEffacer" id="btnEffacer" value="Effacer" onclick="ClearForm(this.form)"/>
</p>
</form>
<p> </p>
</body>
</html>
AdChoices