« »

This is a very simple calculator, all done with javascript. Just click the numbers and the operators and use the '=' button to calculate! This is a neat example of the LIMITLESS powers of JavaScript.

Label: JavaScript Calculator

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">

.bttnop {
width:50px;
color:darkred;
}

.bttn {
width:50px;
color:navy;
}

.answer {
text-align:right;
}

body{
background-color:white;
font-size:10pt;
color:black;
font-family:sans-serif;
}

</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="javascript">
var num1='';
var num2='';
var num1set=false;
var operation='';
var inmem='';
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

var whichkey;

function setnum(num){
if((document.f.answer.value!='')&&num1set)document.f.answer.value='';
if(num1set){
num2+=num;
document.f.answer.value=num2;
}else{
num1+=num;
document.f.answer.value=num1;
}}

function docalc(optionaloper){
if(optionaloper=='')num2=document.f.answer.value;
if((num1!='')&&(num2!='')&&(operation!='')){
document.f.answer.value=eval(num1+operation+num2);
if(optionaloper==''){
num1='';
num2='';
num1set=false;
}else{
num1=document.f.answer.value;
num1set=true;
num2='';
}
operation=optionaloper;
}}

function setoper(oper){
if(num1set&&(document.f.answer.value!='')&&(num2==''))operation=oper;
if(num1set&&(operation!='')&&(num2!=''))docalc(oper);
if(!num1set){
operation=oper;
num1=document.f.answer.value;
num1set=true;
}}

function backsp(){
if(document.f.answer.value.length>=1){
document.f.answer.value=document.f.answer.value.substring(0,document.f.answer.value.length-1);
if(num1set) num2=document.f.answer.value;
else num1=document.f.answer.value;
}}

function testdot(){
if(num1set) if(num2.indexOf('.')==(-1))setnum('.');
else if(num1.indexOf('.')==(-1))setnum('.');
}

function memory(b){
switch(b){
case 0: inmem='';
document.f.box.checked=false;
break;
case 1:if(document.f.box.checked==true)document.f.answer.value=inmem;
break;
case 2: inmem=parseFloat(document.f.answer.value);
document.f.box.checked=true;
break;
case 3: 
if(inmem==''){
inmem=document.f.answer.value;
document.f.box.checked=true;
}else inmem+=parseFloat(document.f.answer.value);
break;
}}

function clearall(yes){
if(yes){
num1='';
num2='';
num1set=false;
operation='';
}else num2='';
document.f.answer.value=num1;
}

function negate(){
if(num1set){
if(num2!=''){
num2=-num2;
document.f.answer.value=num2;
}}else{
if(num1!=''){
num1=-num1;
document.f.answer.value=num1;
}}}

function percent(){
if((num1!='')&&(num2!='')){
num2=''+((parseFloat(num2))/100*parseFloat(num1));
document.f.answer.value=num2;
}}

function squareroot(){
if(num1set){
if(num2!=''){
num2=''+Math.sqrt(parseFloat(num2));
document.f.answer.value=num2;
}}else{
if(num1!=''){
num1=''+Math.sqrt(parseFloat(num1));
document.f.answer.value=num1;
}}}

function invert(){
if(num1set){
if(num2!=''){
num2=''+1/parseFloat(num2);
document.f.answer.value=num2;
}}else{
if(num1!=''){
num1=''+1/parseFloat(num1);
document.f.answer.value=num1;
}}}

function checkbx(){
(inmem!='')? document.f.box.checked=true: document.f.box.checked=false;
alert('Do not click here.\n\nThis is to show if you have something in memory.');
document.f.box.blur();
}

function showkeypress(keypress){
if(!(ns4||ns6))whichkey=event.keyCode;
else whichkey=keypress.which;
if((whichkey>=48)&&(whichkey<=57)){
whichkey=whichkey-48;
setnum(whichkey.toString());
}else{
switch(whichkey){
case 27: clearall(true);
break;
case 13: docalc('');
break;
case 42: setoper('*'); 
break;
case 45: setoper('-');
break;
case 43: setoper('+'); 
break;
case 47: setoper('/');
break;
case 46: testdot(); 
break;
}}}

if(ns4){
window.captureEvents(Event.KEYPRESS);
window.onkeypress=showkeypress;
}else document.onkeypress=showkeypress;

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<form name="f">
<table cellspacing="0" cellpadding="6" border="0" bgcolor="#006bae">
<tr>
<td align="center" colspan="6">
<input type="text" class="answer" size="30" name="answer">
</td>
</tr>
<tr>
<td align="center" colspan="6">
<input type="checkbox" onClick="checkbx()" name="box" value="ON"> Mem&nbsp;&nbsp;&nbsp;&nbsp;

<input type="button" value="Backspace" onClick="this.blur(); backsp()">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="    CE    " onClick="this.blur(); clearall(false)">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="     C     " onClick="this.blur(); clearall(true)">
</td>
</tr>
<tr>
<td align="center"><input type="button" class="bttnop" value="  MC  " onClick="this.blur(); memory(0)"></td>
<td align="center"><input type="button" class="bttn" value="   7   " onClick="this.blur(); setnum('7')"></td>
<td align="center"><input type="button" class="bttn" value="   8   " onClick="this.blur(); setnum('8')"></td>
<td align="center"><input type="button" class="bttn" value="   9   " onClick="this.blur(); setnum('9')"></td>
<td align="center"><input type="button" class="bttnop" value="   /    " onClick="this.blur(); setoper('/')"></td>
<td align="center"><input type="button" class="bttnop" value=" sqrt " onClick="this.blur(); squareroot()"></td>
</tr>
<tr>
<td align="center"><input type="button" class="bttnop" value="  MR  " onClick="this.blur(); memory(1)"></td>
<td align="center"><input type="button" class="bttn" value="   4   " onClick="this.blur(); setnum('4')"></td>
<td align="center"><input type="button" class="bttn" value="   5   " onClick="this.blur(); setnum('5')"></td>

<td align="center"><input type="button" class="bttn" value="   6   " onClick="this.blur(); setnum('6')"></td>
<td align="center"><input type="button" class="bttnop" value="   *    " onClick="this.blur(); setoper('*')"></td>
<td align="center"><input type="button" class="bttnop" value="  %  " onClick="this.blur(); percent()"></td>
</tr>
<tr>
<td align="center"><input type="button" class="bttnop" value="  MS  " onClick="this.blur(); memory(2)"></td>
<td align="center"><input type="button" class="bttn" value="   1   " onClick="this.blur(); setnum('1')"></td>
<td align="center"><input type="button" class="bttn" value="   2   " onClick="this.blur(); setnum('2')"></td>
<td align="center"><input type="button" class="bttn" value="   3   " onClick="this.blur(); setnum('3')"></td>
<td align="center"><input type="button" class="bttnop" value="   -    " onClick="this.blur(); setoper('-')"></td>
<td align="center"><input type="button" class="bttnop" value="  1/x " onClick="this.blur(); invert()"></td>
</tr>
<tr>
<td align="center"><input type="button" class="bttnop" value="  M+  " onClick="this.blur(); memory(3)"></td>
<td align="center"><input type="button" class="bttn" value="   0   " onClick="this.blur(); setnum('0')"></td>
<td align="center"><input type="button" class="bttnop" value="  +/-  " onClick="this.blur(); negate()"></td>
<td align="center"><input type="button" class="bttn" value="   .    " onClick="this.blur(); testdot()"></td>

<td align="center"><input type="button" class="bttnop" value="   +   " onClick="this.blur(); setoper('+')"></td>
<td align="center"><input type="button" class="bttnop" value="  =   " onClick="this.blur(); docalc('')"></td>
</tr>
</table>
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->