ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming»
  • Programming Languages

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>
<head><title>Financing</title></head>
<body>
<script language="JavaScript">
function add(){

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>
Grade<input type="text" id="g"><p>
<input type ="button" value="Calculate" onClick="add();">

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

Screen shot

Example two : Exam Analysis

<html>
<head>
<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>
</head>

<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)
{
document.frmexamanalysis.Grade.value="A";
}
else if(ave>=60)
{
document.frmexamanalysis.Grade.value="B";
}
else if(ave>=40)
{
document.frmexamanalysis.Grade.value="C";
}
else
{
document.frmexamanalysis.Grade.value="D";
}
}


</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>
<td><p>AdmNo&nbsp&nbsp&nbsp<input type="text" id="adm" name="AdmNo"></p></td></tr>
<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><p>Grade<input type="text" id="grd" name="Grade"></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>

ExamAnalysis

Exam Analysis Class assignment
Exam Analysis Class assignment | Source

Example Three: Payroll

<html>
<head>
<title>Payroll</title>
</head>
<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>

Payroll screenshot

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

    0 of 8192 characters used
    Post Comment

    • profile image

      naomi binsari 2 years ago

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

    • nnjiru profile image
      Author

      nnjiru 3 years ago

      Chris Los you use parseFloat instead of parseInt

    • profile image

      chris los 4 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.

    • profile image

      luke 4 years ago

      thank you dude

    • profile image

      komen 4 years ago

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

    • nnjiru profile image
      Author

      nnjiru 4 years ago

      Mathiang welcome for more

    • profile image

      Mathiang 4 years ago

      Very nice tutorial.It has solved my headache

    • nnjiru profile image
      Author

      nnjiru 4 years ago

      This is a cool tutorial. awesome