It’s very easy to create a calculator. In this article, I am going to show you, how to make a calculator in javascript. Just copy the code and paste it in any text editor and save it as (dot).html.
In this post I used JavaScript build in eval() function to calculate the statement on input field .Before I start lets know something about to make a calculator using JavaScript eval() function.
eval() is a built in JavaScript global function.
The eval() function is used to evaluate the expression.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type=button] {
width: 2em; height: 2em;
}
</style>
</head>
<body>
<form name="calculator">
<table align="center">
<tr>
<td colspan="4"><input type="text" name="display" size="14"></td>
</tr>
<tr>
<td><input type="button" name="C" value="C" onclick="calculator.display.value = '' "></td>
<td><input type="button" name="x2" value="x2" onclick="calculator.display.value = eval(calculator.display.value*calculator.display.value)"></td>
<td><input type="button" name="%" value="%" onclick="calculator.display.value = (eval(calculator.display.value)/100)"></td>
<td><input type="button" name="/" value="/" onclick="calculator.display.value += '/' "></td>
</tr>
<tr>
<td><input type="button" name="7" value="7" onclick="calculator.display.value += '7' "></td>
<td><input type="button" name="8" value="8" onclick="calculator.display.value += '8' "></td>
<td><input type="button" name="9" value="9" onclick="calculator.display.value += '9' "></td>
<td><input type="button" name="X" value="X" onclick="calculator.display.value += '*' "></td>
</tr>
<tr>
<td><input type="button" name="4" value="4" onclick="calculator.display.value += '4' "></td>
<td><input type="button" name="5" value="5" onclick="calculator.display.value += '5' "></td>
<td><input type="button" name="6" value="6" onclick="calculator.display.value += '6' "></td>
<td><input type="button" name="-" value="-" onclick="calculator.display.value += '-' "></td>
</tr>
<tr>
<td><input type="button" name="1" value="1" onclick="calculator.display.value += '1' "></td>
<td><input type="button" name="2" value="2" onclick="calculator.display.value += '2' "></td>
<td><input type="button" name="3" value="3" onclick="calculator.display.value += '3' "></td>
<td><input type="button" name="+" value="+" onclick="calculator.display.value += '+' "></td>
</tr>
<tr>
<td><input type="button" name="0" value="0" onclick="calculator.display.value += '0' "></td>
<td><input type="button" name="00" value="00" onclick="calculator.display.value += '00' "></td>
<td><input type="button" name="." value="." onclick="calculator.display.value += '.' "></td>
<td><input type="button" name="=" value="=" onclick="calculator.display.value = eval(calculator.display.value)"></td>
</tr>
</table>
</form>
</body>
</html>
I have made above code to make a simple calculator. Here I have used onClick ( onClick is the JavaScript built-in function. This function will work when click on this button) “calculator.display.value” (calculator is the form name, display is the text field name where the value and result will be showed of the calculation)
I have used eval() function and html input tag into this code. I hope, this code will be quit helpful to make calculator for primary stage.