Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

1. ## Calculations!

Afternoon

I have just started learning JavaScript and I'm trying to create a calculator that subtracts two values in an input field and then divides it by 4. I would like the result to be displayed on another field whenever the user clicks in "Calculate". However, whenever I try clicking in Calculate nothing happens.

This is my code:

Code:

<form name "calc" >

Life expectancy
<input name="average" value="0" maxlength="3">

<p> Age
<input name="age" value="0" maxlength="3">
</p>

<p>
<input type="button" value="Calculate" onClick="calculation()" />
</p>

<p>
Result
<input type="text" name="result" size="10" disabled/>
</p>

</form>
Would really appreciate if someone could help me out!
Thank you!

• Oh and the function I have used is

Code:
<script>

function calculation (){

var age, average, total;
average = parseInt(document.calc.getElementById("average").value, 10);
age = parseInt(document.calc.getElementById("age").value, 10);
total = average - age;
document.calc.getElementById("result") = total / 4;

}

</script>
Thank you again

• 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" xml:lang="en" lang="en">

<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function calculation(button,le,ag,re,by){
var frm=button.form;
if (frm){
var le=frm[le],ag=frm[ag],re=frm[re]; // convert the strings to form elements
if (le&&ag&&re){
le=(le.value).replace(/\D/g,''); // remove none numbers
le.value=le||0;
ag=(ag.value).replace(/\D/g,'');
ag.value=le||0;
re.value=(le-ag)*(by||1);  // le and ag are strings but subtraction or multiplication converts them to numbers
}
}
}

/*]]>*/

<body>
<form name="calc" >

Life expectancy
<input name="average" value="0" maxlength="3">

<p> Age
<input name="age" value="0" maxlength="3">
</p>

<p>
<input type="button" value="Calculate" onClick="calculation(this,'average','age','result',4)" />
</p>

<p>
Result
<input type="text" name="result" size="10" disabled/>
</p>

</form>
</body>

</html>

• The name attribute is deprecated (except on form controls) and should therefore not be used on the form element. Use id instead and address the form with document.getElementById('calc'). Also, use labels with your inputs.

• In other words, if you change to
Code:
<form id="calc">
then your JS code could be:
Code:
<script type="text/javascript">

function calculation ()
{
var form, age, average, total;
form = document.getElementById("calc");
average = parseInt( form.average.value, 10);
age = parseInt(form.age.value,10);
total = average - age;
form.result.value = total / 4;

}

</script>

• You can leave out the two lines calling parseInt to convert the numbers - the subtraction on the following line will do that anyway.

• Well, you can't leave out the lines. You can just leave out the parseInt() call.

Or you could leave out the lines by some minor rewriting:
Code:
<script type="text/javascript">

function calculation ()
{
var form = document.getElementById("calc");
form.result.value = ( form.average.value - form.age.value ) / 4;

}

</script>

•

#### Posting Permissions

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