How to make a simple calculator using JavaScript?

Hey Folks,
I am up with another tutorial of JavaScript. In this tutorial, we will learn how to make a calculator using JavaScript. In this world everyone needs a calculator, isn’t it? But I will give you a simple method of it. So let us begin with this JS tutorial.

Functions are the base of JavaScript. Without functions, JavaScript code would be difficult to understand. We first create individual functions that represent numbers from one to nine. We have also created a status option. Because this acts as a screen of the calculator.

Make calculator using JavaScript

We also make different functions of operations to be performed. And we use the return keyword to represent current status. We make functions like add(), product(), division(), multiply().

We use a return keyword in every function. Because as soon as the function is called it returns the value of a variable. We initially keep the value of x as zero. But later we keep adding values to x.

Using the script tag : 

<script>
var x
x=0
function f1()
{
x=x+"1"
document.fr.t2.value=x
return x
}
function f2()
{
x=x+"2"
document.fr.t2.value=x
return x
}
function f3()
{
x=x+"3"
document.fr.t2.value=x
return x
}
function f4()
{
x=x+"4"
document.fr.t2.value=x
return x
}
function f5()
{
x=x+"5"
document.fr.t2.value=x
return x
}
function f6()
{
x=x+"6"
document.fr.t2.value=x
return x
}
function f7()
{
x=x+"7"
document.fr.t2.value=x
return x
}
function f8()
{
x=x+"8"
document.fr.t2.value=x
return x
}
function f9()
{
x=x+"9"
document.fr.t2.value=x
return x
}
function add()
{
x=x+"+"
document.fr.t2.value=x
return x
}
function prod()
{
x=x+"*"
document.fr.t2.value=x
return x
}
function divi()
{
x=x+"/"
document.fr.t2.value=x
return x
}
function subs()
{
x=x+"-"
document.fr.t2.value=x
return x
}
function result()
{
document.fr.t1.value=eval(x)
}
</script>

Adding form tag :

<form name="fr">
<input type="button" value="1" onClick="f1()">
<input type="button" value="2" onClick="f2()">
<input type="button" value="3" onClick="f3()">
<br><input type="button" value="4" onClick="f4()">
<input type="button" value="5" onClick="f5()">
<input type="button" value="6" onClick="f6()">
<br><input type="button" value="7" onClick="f7()">
<input type="button" value="8" onClick="f8()">
<input type="button" value="9" onClick="f9()">
<br>
<input type="button" value="+" onClick="add()">
<input type="button" value="*" onClick="prod()">
<input type="button" value="/" onClick="divi()">
<input type="button" value="-" onClick="subs()">
<input type="button" value="=" onClick="result()">
<br>
Status<input type="text" name="t2">
<br>Result<input type="text" name="t1">
<br>
<input type="reset">
</form>

We write document.frm.t2.value=x to assign value of x to t2. Where frm is our form name. And t2 is the name of our textbox. Which we have made in our form tag. And eval() function evaluates the final result of the expression.

So, for example, eval(2 + 2) will give output as 4. But we have used eval function only at the end. You might wonder why only at the last step. It is so because we have used it in place of equal to symbol in the calculator. Specifying type as a button makes a button on our web browser.

I hope you understood the code. Please feel free to ask your doubts in the comment section below.

You may also read,

• Build a simple calculator using Java AWT