Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Simple Javascript Math Calculator - almost there!

New Here ,
Dec 06, 2009 Dec 06, 2009

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>

TOPICS
Server side applications
1.1K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Dec 06, 2009 Dec 06, 2009

The form is cleared because it is submitting to itself. Just add a return false to the submit call:

  <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);return false" />

Translate
LEGEND ,
Dec 06, 2009 Dec 06, 2009

The form is cleared because it is submitting to itself. Just add a return false to the submit call:

  <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);return false" />

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 06, 2009 Dec 06, 2009
LATEST

Works like a charm. Thanks!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines