# Calculations using Javascripts functions and HTML Forms

Updated on March 1, 2013

## Java Scripts Calculations

1. Using appropriate HTML formatting tools such as notepad,notepad++,dreamweaver, Netbeans, visual studio, C# create a file called calculations.html and save it in an appropriate loaction.

<html>
<body>
<script language="JavaScript">

var x;
var a=document.getElementById('one');
var b=document.getElementById('two');
var c=document.getElementById('ans');
var d=document.getElementById('g');

c.value=0;
c.value=parseInt(c.value);
c.value=parseInt(a.value)+parseInt(b.value)
if (c.value>=50){
d.value="Pass";
}
else{
d.value="Fail";

}

}
</script>

<form name="frmf">
Enter Value 1<input type="text" id="one"><p>
Enter Value 2<input type="text" id="two"><p>
Total is<input type="text" id="ans"><p>
Departent<select id ="cc" name="course">
<option>Finance</option>
<option>Production</option>
<option>ICT</option>
<option>Marketing</option>
</select>
<p>

</form>

</body>

</html>

2.Open the file using appropriate browser such as Google Chrome,internet Explorer,Opera, Safari etc

3.Enter the values for values one and two and click the calculate button.

4.The grading is pass if the total is greater than 50% else the grade is Fail.

## Example two : Exam Analysis

<html>
<title>School Exams</title>
<style type="text/css">
td{border;6px solid #CCC}
table{
background-color:silver;
border:1px solid black;
}
body{
background-color:#008080;
}
h1{color:red;}
</style>

<body>

<script Language="JavaScript">
function calculate()
{
var bio=parseInt(document.frmexamanalysis.BIO.value);
var eng=parseInt(document.frmexamanalysis.English.value);
var phy=parseInt(document.frmexamanalysis.Physics.value);
var his=parseInt(document.frmexamanalysis.History.value);
var ttl=(bio+eng+phy+his)
var ave=parseFloat(ttl/4)
document.frmexamanalysis.Totalmarks.value=ttl;
document.frmexamanalysis.Average.value=ave;
if (ave>=80)
{
}
else if(ave>=60)
{
}
else if(ave>=40)
{
}
else
{
}
}

</script>
<h1><center>High school Exam analysis</center></h1>
<form name="frmexamanalysis">
<table width="50%" height="50%" border="0" align="center">
<tr><td><p>Name<input type="text" id="name" name="Name"></p></td>
<tr><td><p>BIO<input type="text" id="bio" name="BIO"></p></td>
<td><p>English<input type="text" id="eng" name="English"></p></td></tr>
<tr><td><p>Physics<input type="text" id="phy" name="Physics"></p></td>
<td><p>History<input type="text" id="his" name="History"></p></td></tr>
<tr><td><p>Total marks<input type="text" id="ttl" name="Totalmarks"></p></td>
<td><p>Average<input type="text" id="ave" name="Average"></p></td></tr>

<tr>
<td><input type="Button" value="CALCULATE" OnClick="calculate()";></td>
<td><button type="RESET" value="Refresh">REFRESH</button></td>
</tr>

</table>
</form>
</body>
</html>

## Example Three: Payroll

<html>
<title>Payroll</title>
<style type="text/css">
td{border;6px solid #CCC}
table{
background-color:aqua;
border:1px solid black}
body{
background-color:gray;
background-image:url(alicia.jpg);
background-repeat:no-repeat;
background-position:top left;
}
</style>
<body>
<script Language="JavaScript">
function calculate()
{
var bp=parseInt(document.frmpayroll.bp.value);
var paye=0.08*bp
var ha=0.1*bp
var nssf=0.01*bp
var nhif=0.02*bp
var gp=bp+ha
var np=gp-(nssf+nhif+paye)
document.frmpayroll.HA.value=ha;
document.frmpayroll.NSSF.value=nssf;
document.frmpayroll.NHIF.value=nhif;
document.frmpayroll.grosspay.value=gp;
document.frmpayroll.netpay.value=np;
document.frmpayroll.paye.value=paye;
}
</script>
<h1><center>Employees Payroll Example</center></h1>
<form name="frmpayroll">
<table width="50%" height="50%" border="0" align="center">
<tr><td colspan="2"><p>Name<input type="text" id="name" name="Name"></p></td></tr>
<tr><td><p>Basic Pay<input type="text" id="bp" name="bp"></p></td>
<td><p>Department:
<select name ="Department" id="dep">
<option>Production</option>
<option>Finance</option>
<option>Human Resources</option>
<option>Marketing</option>
</select>
</p></td></tr>
<tr><td><p>NHIF<input type="text" id="nhif" name="NHIF"></p></td>
<td><p>House Allowance <input type="text" id="ha" name="HA"></p></td></tr>
<tr><td><p>NSSF<input type="text" id="nssf" name="NSSF"></p></td>
<td><p>PAYE<input type="text" id="paye" name="paye"></p></td></tr>
<tr><td><p>GROSS PAY<input type="text" id="gp" name="grosspay"></p></td>
<td><p>NET PAY<input type="text" id="np" name="netpay"></p></td>
</tr>

<tr>
<td colspan="1"><input type="Button" value="CALCULATE" OnClick="calculate()";</td>
<td ><button type="RESET" value="CLEAR">clear</button></td>
</tr>
</table>
</form>
</body>
</html>

3

4

0

## Calculations using CSS,HTML and JavaScript exam Analysis and Payroll Examples

0 of 8192 characters used

• naomi binsari

3 years ago

thank you sir, you have really helped me to like programming.

• AUTHOR

nnjiru

4 years ago

Chris Los you use parseFloat instead of parseInt

• chris los

5 years ago

By example two,when you fill in 4.5 6.5 7.5 8.5= 25

I am missing behind . .5 .5 .5 .5 in de calculation?

PLEASE TELL ME WHAT I HAVE TO DO.

• luke

5 years ago

thank you dude

• komen

5 years ago

nnjiru please give us more tutorials. You have really helped me for my project

• AUTHOR

nnjiru

5 years ago

Mathiang welcome for more

• Mathiang

5 years ago

Very nice tutorial.It has solved my headache

• AUTHOR

nnjiru

5 years ago

This is a cool tutorial. awesome

working