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

Simple Javascript Math Calculator - almost there!

New Here ,
Dec 06, 2009 Dec 06, 2009

Copy link to clipboard

Copied

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

Views

1.1K
Translate

Report

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" />

Votes

Translate
LEGEND ,
Dec 06, 2009 Dec 06, 2009

Copy link to clipboard

Copied

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" />

Votes

Translate

Report

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

Copy link to clipboard

Copied

LATEST

Works like a charm. Thanks!

Votes

Translate

Report

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