In this tutorial we will be creating a very simple javascript calculator. This calculator does not resemble any real calculator, the soul purpose of this calculator is to teach how to extract the input values from a textbox and how to set the output values to a textbox. This tutorial is for newcomers to javascript.

You can see the javascript-calculator in action here.

This calculator consists of three textboxes ,2 of them are for taking the input and the third for showing the result. Also there are 4 buttons for '+', '-', '*' and '/' .

The Javascript code

<script language="javascript">
function fadd()
{
var first,sec,res;
//Take the value of first textbox and convert it to float
first=parseFloat(document.forms[0].txt1st.value);
//Take the value of second textbox and convert it to float
sec=parseFloat(document.forms[0].txt2nd.value);
res=first+sec;
//show the result in alertbox
alert("the result"+res);
//show the result in the result textbox
document.forms[0].txtresult.value=res;
}
</script>

Here each of the operations are coded as separate functions. For convenience we will describe only one function "fadd()" . Rest of the functions are very similar.

Step1) We are reading the values written in the first two textboxes
with the statement
first=parseFloat(document.forms[0].txt1st.value);
"document.forms[0].txt1st.value" gets the value written in the first textbox, and parseFloat converts the number from string to Float value.
Step 2) Add up the values of two textboxes.
res=first+sec;
Step 3) Show the result in a alertbox using
alert("the result"+res);
Step 4)Also show the result in the third text box using the statement
document.forms[0].txtresult.value=res;

Now the code of the HTML form

<form name="cal" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="19%"><div align="left">Enter 1st number

</div></td>
<td width="81%"><input name="txt1st" type="text" id="txt1st"></td>
</tr>
<tr>
<td><div align="left">Enter 2nd number

</div></td>
<td><input name="txt2nd" type="text" id="txt2nd"></td>
</tr>
<tr>
<td height="28"><div align="left">Result

</div></td>
<td height="28"><input name="txtresult" type="text" id="txtresult"></td>
</tr>
<tr>
<td height="21"> <div align="left"> </div></td>
<td height="21"><input name="btnadd" type="button" id="btnadd" value="+" onclick="fadd()">
<input name="btnminus" type="button" id="btnminus" value="-" onClick="fminus()">
<input name="btndiv" type="button" id="btndiv" value="%" onClick="fdiv()">
<input name="btnmult" type="button" id="btnmult" value="*" onClick="fmult()"></td>
</tr>
<tr>
<td colspan="2">&nbsp; </td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
</form>

Here you can see we have called the javascript functions ""fadd()"","fminus()","fdiv()","fmult()" from the onClick event of each of the buttons. So That's the trick.
You can see the calculator in action here.
I hope this tutorial will help you in understanding "Javascript". Thank You.

I appriciete the active help of Debashish Patra, 4th year BIT to prepare this tutorial.

Also you can download a full version and more complex calculator here at Calculator .




Back to Tutorial Index page

Comment on this tutorial admin@koderguru.com