Write a javascript program to make a simple calculator
Answers were Sorted based on User's Feedback
Answer / raghu
Actually we already known simple calculator means such like
addition, subraction,division, multiplication.those things
are coding by switch case method.
Is This Answer Correct ? | 114 Yes | 44 No |
<html>
<head>
<title>A simple JavaScript calculator</title>
<script language='JavaScript'>
Default = "0";
Current = "0";
Operation = 0;
MaxLength = 30;
function AddDigit(dig) {
if (Current.indexOf("!") == -1) {
if ((eval(Current) == 0) && (Current.indexOf(".") == -1)) {
Current = dig;
} else {
Current = Current + dig;
}
Current = Current.toLowerCase();
} else {
Current = "Hint! Press 'AC'";
}
if (Current.indexOf("e0") != -1) {
var epos = Current.indexOf("e");
Current = Current.substring(0,epos+1) + Current.substring(epos+2);
}
if (Current.length > MaxLength) {
Current = "Too long";
}
document.Calculator.Display.value = Current;
}
function Dot() {
if ( Current.length == 0) {
Current = "0.";
} else {
if (( Current.indexOf(".") == -1) && (Current.indexOf("e") == -1)) {
Current = Current + ".";
}
}
document.Calculator.Display.value = Current;
}
function DoExponent() {
if ( Current.indexOf("e") == -1 ) {
Current = Current + "e0";
document.Calculator.Display.value = Current;
}
}
function PlusMinus() {
if(Current.indexOf("e") != -1) {
var epos = Current.indexOf("e-");
if (epos != -1) {
Current = Current.substring(0,1+epos) + Current.substring(2+epos);
} else { epos = Current.indexOf("e");
Current = Current.substring(0,1+epos) + "-" + Current.substring(1+epos);
}
} else {
if ( Current.indexOf("-") == 0 ) {
Current = Current.substring(1);
} else {
Current = "-" + Current;
}
if ((eval(Current) == 0) && (Current.indexOf(".") == -1 )) {
Current = "0"; }
}
document.Calculator.Display.value = Current;
}
function Clear() {
Current = "0";
document.Calculator.Display.value = Current;
}
function AllClear() {
Current = "0";
Operation = 0;
Default = "0";
document.Calculator.Display.value = Current;
}
function Operate(op) {
if (Operation != 0) { Calculate(); };
if (op.indexOf("*") > -1) { Operation = 1; };
if (op.indexOf("/") > -1) { Operation = 2; };
if (op.indexOf("+") > -1) { Operation = 3; };
if (op.indexOf("-") > -1) { Operation = 4; };
Default = Current;
Current = "";
document.Calculator.Display.value = Current;
}
function Calculate() {
if (Operation == 1) { Current = eval(Default) * eval(Current); };
if (Operation == 2) {
if (eval(Current) != 0) {
Current = eval(Default) / eval(Current)
} else {
Current = "Divide by zero";
}
}
if (Operation == 3) { Current = eval(Default) + eval(Current); };
if (Operation == 4) { Current = eval(Default) - eval(Current); };
Operation = 0;
Default = "0";
Current = Current + "";
if (Current.indexOf("Infinity") != -1) {
Current = "Value too big";
}
if (Current.indexOf("NaN") != -1) {
Current = "I don't understand";
}
document.Calculator.Display.value = Current;
}
function FixCurrent() {
Current = document.Calculator.Display.value;
Current = "" + parseFloat(Current);
if (Current.indexOf("NaN") != -1) {
Current = "I don't understand";
}
document.Calculator.Display.value = Current;
}
</script>
</head>
<hr><div align="center">
<FORM name="Calculator">
<table width="40%" height="40%" border="4" bgcolor="#FFEBCD"><tr>
<td colspan="2" align="center">
<b><font face="Verdana, Arial, Helvetica" color="#000080" size="3">
A Simple JavaScript Calculator<br></font>
<font face="Courier" size="5">
<input type="text" maxlength="40" size="25" name="Display" onChange="FixCurrent()">
</font></b>
</td></tr>
<tr><td width="65%" align="center">
<table><tr>
<td><input type="button" name="seven" value=" 7 " OnClick="AddDigit('7')"></td>
<td><input type="button" name="eight" value=" 8 " OnClick="AddDigit('8')"></td>
<td><input type="button" name="nine" value=" 9 " OnClick="AddDigit('9')"></td>
</tr><tr>
<td><input type="button" name="four" value=" 4 " OnClick="AddDigit('4')"></td>
<td><input type="button" name="five" value=" 5 " OnClick="AddDigit('5')"></td>
<td><input type="button" name="six" value=" 6 " OnClick="AddDigit('6')"></td>
</tr><tr>
<td><input type="button" name="one" value=" 1 " OnClick="AddDigit('1')"></td>
<td><input type="button" name="two" value=" 2 " OnClick="AddDigit('2')"></td>
<td><input type="button" name="three" value=" 3 " OnClick="AddDigit('3')"></td>
</tr><tr>
<td><input type="button" name="plusmin" value=" +/- " OnClick="PlusMinus()"></td>
<td><input type="button" name="one" value=" 0 " OnClick="AddDigit('0')"></td>
<td><input type="button" name="two" value=" . " OnClick="Dot()"></td>
</tr>
</table>
</td>
<td width="35%" align="center">
<table><tr>
<td><input type="button" name="clear" value=" C " OnClick="Clear()"></td>
<td><input type="button" name="AC" value=" AC " OnClick="AllClear()"></td>
</tr><tr>
<td><input type="button" name="mul" value=" * " OnClick="Operate('*')"></td>
<td><input type="button" name="div" value=" / " OnClick="Operate('/')"></td>
</tr><tr>
<td><input type="button" name="add" value=" + " OnClick="Operate('+')"></td>
<td><input type="button" name="sub" value=" - " OnClick="Operate('-')"></td>
</tr><tr>
<td><input type="button" name="result" value=" = " OnClick="Calculate()"></td>
<td align="right"><input type="button" name="exp" value=" EXP " OnClick="DoExponent()"></td>
</tr></table>
</td>
</tr></table>
</div></body>
</html>
Is This Answer Correct ? | 68 Yes | 26 No |
Answer / raghav seth
html>
<form name="calculator">
<table border=4>
<tr>
<td>
<input type="text" name="text" size="18">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="calculator.text.value += '1'">
<input type="button" value="2" onclick="calculator.text.value += '2'">
<input type="button" value="3" onclick="calculator.text.value += '3'">
<input type="button" value="+" onclick="calculator.text.value += ' + '">
<br>
<input type="button" value="4" onclick="calculator.text.value += '4'">
<input type="button" value="5" onclick="calculator.text.value += '5'">
<input type="button" value="6" onclick="calculator.text.value += '6'">
<input type="button" value="-" onclick="calculator.text.value += ' - '">
<br>
<input type="button" value="7" onclick="calculator.text.value += '7'">
<input type="button" value="8" onclick="calculator.text.value += '8'">
<input type="button" value="9" onclick="calculator.text.value += '9'">
<input type="button" value="*" onclick="calculator.text.value += ' * '">
<br>
<input type="button" value="c" onclick="calculator.text.value = ''">
<input type="button" value="0" onclick="calculator.text.value += '0'">
<input type="button" value="=" onclick="calculator.text.value = eval(calculator.text.value)">
<input type="button" value="/" onclick="calculator.text.value += ' / '">
<br>
</td>
</tr>
</table>
</form>
</html>
Is This Answer Correct ? | 63 Yes | 21 No |
Answer / rehan
<html>
<head><title>Calculator</title>
<script language="javascript">
var inputstring=" "
function updatestring(value)
{
inputstring += value;
document.calculator.input.value=inputstring;
}
</script>
</head>
<body background=flow-yellow.jpg>
<form name="calculator">
<table border=5 bordercolor=pink bgcolor="#ffffcc"><tr ><td>
<input type="text" name="input" maxlength=15 size=27><br />
<input type="button" value=" clear " onclick="input.value=' ';inputstring=' ' ">
<input type="button" value=" mod " onclick="updatestring('%')">
<input type="button" value=" * " onclick="updatestring('*')"><br />
<input type="button" value=" 7 " onclick="updatestring('7')">
<input type="button" value=" 8 " onclick="updatestring('8')">
<input type="button" value=" 9 " onclick="updatestring('9')">
<input type="button" value=" / " onclick="updatestring('/')"><br />
<input type="button" value=" 4 " onclick="updatestring('4')">
<input type="button" value=" 5 " onclick="updatestring('5')">
<input type="button" value=" 6 " onclick="updatestring('6')">
<input type="button" value=" - " onclick="updatestring('-')"><br />
<input type="button" value=" 1 " onclick="updatestring('1')">
<input type="button" value=" 2 " onclick="updatestring('2')">
<input type="button" value=" 3 " onclick="updatestring('3')">
<input type="button" value=" + " onclick="updatestring('+')"><br />
<input type="button" value=" 0 " onclick="updatestring('0')">
<input type="button" value=" 00 " onclick="updatestring('00')">
<input type="button" value=" . " onclick="updatestring('.')">
<input type="button" value=" = " onclick="input.value=eval(inputstring);">
</td></tr>
</table>
</form>
</body>
</html>
Is This Answer Correct ? | 32 Yes | 13 No |
Answer / vinoth180
var a=20;
var b=11;
document.writeln("ADDITION:",a+b,"<br>");
document.writeln("SUB:",a-b,"<br>");
document.writeln("MUL:",a*b,"<br>");
document.writeln("MUL:",a%b,"<br>");
Is This Answer Correct ? | 47 Yes | 33 No |
Answer / ruchi goswami
<html>
<head>
<link rel="stylesheet" type="text/css" href="css2.css">
<title> calculator </title>
</head>
<body>
<div id="wrap">
<h1> Calculator </h1>
<b> enter first number </b>
                   
<b> enter second number </b>
<form action="">
<input type="text" name="firstnum" id="first">
                   
<input type="text" name="lastnum" id="second">
</form>
<br> </br>
<button onclick="sum()"> + </button>
               
<button onclick="sub()"> - </button>
               
<button onclick="mul()"> * </button>
               
<button onclick="divi()"> / </button>
<br> </br>
<input type="text" id="result">
<p id="demo"></p>
<script>
function sum()
{
var a = Number(document.getElementById("first").value);
var b = Number(document.getElementById("second").value);
c = a+b;
document.getElementById("result").value = c;
}
function sub()
{
var a = Number(document.getElementById("first").value);
var b = Number(document.getElementById("second").value);
c = a-b;
document.getElementById("result").value = c;
}
function mul()
{
var a = Number(document.getElementById("first").value);
var b = Number(document.getElementById("second").value);
c = a*b;
document.getElementById("result").value = c;
}
function divi()
{
var a = Number(document.getElementById("first").value);
var b = Number(document.getElementById("second").value);
c = a/b;
document.getElementById("result").value = c;
}
</script>
</div>
</body>
</html>
Is This Answer Correct ? | 15 Yes | 1 No |
Answer / mehta fenil & bodiwala rum
<html>
<head>
<title>Basic Calculator</title>
<script language="JavaScipt" type="text/JavaScript">
var adddigit=false;
var oldval=0;
var op="=";
function btnconcat(c)
{
if(adddigit)
{
document.getElementById("txtdisplay").value+=c;
}
else
{
document.getElementById("txtdisplay").value=c;
adddigit=true;
}
}
function operation(newop)
{
var newarg=eval(document.getElementById("txtdisplay").value)
if(op=="+")
{
oldval=oldval+newarg;
}
else if(op=="-")
{
oldval=oldval-newarg;
}
else if(op=="*")
{
oldval=oldval*newarg;
}
else if(op=="/")
{
oldval=oldval/newarg;
}
else if(op=="=")
{
oldval=newarg;
}
else
{
oldval=newarg;
}
document.getElementById("txtdisplay").value=oldval;
adddigit=false;
op=newop;
}
function backspace()
{
document.getElementById("txtdisplay").value=document.getElementById("txtdisplay").value.substring(0,document.getElementById("txtdisplay").value.length*1-1);
}
function btnce()
{
document.getElementById("txtdisplay").value="";
}
function btnc()
{
document.getElementById("txtdisplay").value=0;
oldval=0;
adddigit=false;
op="=";
}
</script>
</head>
<body>
<center>
<table border=5 cellpading=5 cellspacing=5>
<tr>
<td colspan="4"><input type="text" id="txtdisplay"
size="25" style="text-align:right"></td>
</tr>
<tr>
<td>
<center>
<input type="button" id="btnc" value="C"
onClick="btnc();">
</center>
</td>
<td>
</td>
<td>
<center>
<input name="Button" type="button" id="btnc"
onClick="btnce();" value="CE">
</center>
</td>
<td>
<center>
<input type="button" id="btnc" value="<="
onClick="backspace();">
</center>
</td>
</tr>
<tr>
<td>
<center>
<input type="button" id="btn7" value="7"
onClick="btnconcat(7);">
</center>
</td>
<td>
<center>
<input type="button" id="btn8" value="8"
onClick="btnconcat(8);">
</center>
</td>
<td>
<center>
<input type="button" id="btn9" value="9"
onClick="btnconcat(9);">
</center>
</td>
<td>
<center>
<input type="button" id="btnpls" value="+"
onClick="operation('+');">
</center>
</td>
</tr>
<tr>
<td>
<center>
<input type="button" id="btn4" value="4"
onClick="btnconcat(4);">
</center>
</td>
<td>
<center>
<input type="button" id="btn5" value="5"
onClick="btnconcat(5);">
</center>
</td>
<td>
<center>
<input type="button" id="btn6" value="6"
onClick="btnconcat(6);">
</center>
</td>
<td>
<center>
<input type="button" id="btnmin" value="-"
onClick="operation('-');">
</center>
</td>
</tr>
<tr>
<td>
<center>
<input type="button" id="btn1" value="1"
onClick="btnconcat(1);">
</center>
</td>
<td>
<center>
<input type="button" id="btn2" value="2"
onClick="btnconcat(2);">
</center>
</td>
<td>
<center>
<input type="button" id="btn3" value="3"
onClick="btnconcat(3);">
</center>
</td>
<td>
<center>
<input type="button" id="btnmul" value="*"
onClick="operation('*');">
</center>
</td>
</tr>
<tr>
<td>
<center>
<input type="button" id="btnpoi" value="."
onClick="btnconcat('.');">
</center>
</td>
<td>
<center>
<input type="button" id="btn0" value="0"
onClick="btnconcat(0);">
</center>
</td>
<td>
<center>
<input type="button" id="btneql" value="="
onClick="operation(value)">
</center>
</td>
<td>
<center>
<input type="button" id="btndiv" value="/"
onClick="operation('/');">
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
Is This Answer Correct ? | 12 Yes | 3 No |
Answer / san
<html>
<form name="cals">
<table border=1>
<tr>
<td>
<input type="text" name="text" size=15>
</td>
</tr>
<br>
<tr>
<td>
<input type="button" value="1" onclick="cals.text.value +='1'">
<input type="button" value="2" onclick="cals.text.value +='2'">
<input type="button" value="3" onclick="cals.text.value +='3'">
<input type="button" value="+" onclick="cals.text.value +='+'">
<br>
<input type="button" value="4" onclick="cals.text.value +='4'">
<input type="button" value="5" onclick="cals.text.value +='5'">
<input type="button" value="6" onclick="cals.text.value +='6'">
<input type="button" value="- " onclick="cals.text.value +='-'">
<br>
<input type="button" value="7" onclick="cals.text.value +='7'">
<input type="button" value="8" onclick="cals.text.value +='8'">
<input type="button" value="9" onclick="cals.text.value +='9'">
<input type="button" value="*" onclick="cals.text.value +='*'">
<br>
<input type="button" value="c" onclick="cals.text.value =''">
<input type="button" value="0" onclick="cals.text.value +='0'">
<input type="button" value="=" onclick="cals.text.value = eval(cals.text.value)">
<input type="button" value="/" onclick="cals.text.value +=' /'">
<br>
</td>
</tr>
</table>
</form>
</html>
Is This Answer Correct ? | 11 Yes | 7 No |
Answer / s.suresh
<html>
<form name="calculator">
<table border=4>
<tr>
<td>
<input type="text" name="text" size="18">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="1"
onclick="calculator.text.value += '1'">
<input type="button" value="2"
onclick="calculator.text.value += '2'">
<input type="button" value="3"
onclick="calculator.text.value += '3'">
<input type="button" value="+"
onclick="calculator.text.value += ' + '">
<br>
<input type="button" value="4"
onclick="calculator.text.value += '4'">
<input type="button" value="5"
onclick="calculator.text.value += '5'">
<input type="button" value="6"
onclick="calculator.text.value += '6'">
<input type="button" value="-"
onclick="calculator.text.value += ' - '">
<br>
<input type="button" value="7"
onclick="calculator.text.value += '7'">
<input type="button" value="8"
onclick="calculator.text.value += '8'">
<input type="button" value="9"
onclick="calculator.text.value += '9'">
<input type="button" value="*"
onclick="calculator.text.value += ' * '">
<br>
<input type="button" value="c"
onclick="calculator.text.value = ''">
<input type="button" value="0"
onclick="calculator.text.value += '0'">
<input type="button" value="="
onclick="calculator.text.value = eval(calculator.text.value)">
<input type="button" value="/"
onclick="calculator.text.value += ' / '">
<br>
</td>
</tr>
</table>
</form>
</html>
Is This Answer Correct ? | 11 Yes | 8 No |
Answer / krishna
<html>
<form name="calculator">
<table border=4>
<tr>
<td>
<input type="text" name="text" size="18">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="calculator.text.value += '1'">
<input type="button" value="2" onclick="calculator.text.value += '2'">
<input type="button" value="3" onclick="calculator.text.value += '3'">
<input type="button" value="+" onclick="calculator.text.value += ' + '">
<br>
<input type="button" value="4" onclick="calculator.text.value += '4'">
<input type="button" value="5" onclick="calculator.text.value += '5'">
<input type="button" value="6" onclick="calculator.text.value += '6'">
<input type="button" value="-" onclick="calculator.text.value += ' - '">
<br>
<input type="button" value="7" onclick="calculator.text.value += '7'">
<input type="button" value="8" onclick="calculator.text.value += '8'">
<input type="button" value="9" onclick="calculator.text.value += '9'">
<input type="button" value="*" onclick="calculator.text.value += ' * '">
<br>
<input type="button" value="c" onclick="calculator.text.value = ''">
<input type="button" value="0" onclick="calculator.text.value += '0'">
<input type="button" value="=" onclick="calculator.text.value = eval(calculator.text.value)">
<input type="button" value="/" onclick="calculator.text.value += ' / '">
<br>
</td>
</tr>
</table>
</form>
</html>
Is This Answer Correct ? | 8 Yes | 5 No |
What's Prototypes for JavaScript
What is memory leak in javascript?
What is argument objects in javascript & how to get the type of arguments passed to a function?
What is class example?
What is the use of a date object in javascript?
What is stack queue?
What is the difference between ‘var’ and ‘let’ keyword?
What is dataview in javascript?
What is enum data type?
What is enum size?
What is the output of 10+20+”30″ in JavaScript?
Why is javascript so hard?