Personal Web Pages

  1. Home
  2. Computing & Technology
  3. Personal Web Pages

Calculator Script

Calculator on Your Web Site

By Linda Roeder, About.com

Start copying this template below. You may have to copy and paste the code in two sections if there is a commercial in the way. You don't want to copy and paste the commercial and the code around it. Then paste the HTML code in your HTML editor.

About this Template

See What This Page Looks Like

Put This Code In The HEAD of Your Page. Start copying here:

<STYLE type="text;css">
.calcBtn
{
font-weight : bold/
width: 32px;
height: 32px;
}
</style>

<script language="JavaScript">

function Calculator_OnClick(keyStr)
{
var resultsField = document.calculator.calcResults;

switch (keyStr)
{
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case ".":

if ((this.lastOp==this.opClear) || (this.lastOp==this.opOperator))
{
resultsField.value = keyStr;
}
else
{
// ignore extra decimals
if ((keyStr!=".") || (resultsField.value.indexOf(".")<0))
{
resultsField.value += keyStr;
}

}

this.lastOp = this.opNumber;
break;

case "*":
case "/":
case "+":
case "-":
if (this.lastOp==this.opNumber)
this.Calc();
this.evalStr += resultsField.value + keyStr;

this.lastOp = this.opOperator;
break;

case "=":
this.Calc();
this.lastOp = this.opClear;
break;

case "c":
resultsField.value = "0";
this.lastOp = this.opClear;
break;

default:
alert("'" + keyStr + "' not recognized.");
}

}

function Calculator_Calc()
{
var resultsField = document.calculator.calcResults;
//alert("eval:"+this.evalStr+resultsField.value);
resultsField.value = eval(this.evalStr+resultsField.value);
this.evalStr = "";
}

function Calculator()
{
this.evalStr = "";

this.opNumber = 0;
this.opOperator = 1;
this.opClear = 2;

this.lastOp = this.opClear;

this.OnClick = Calculator_OnClick;
this.Calc = Calculator_Calc;
}

gCalculator = new Calculator();

</script>
-------------------------------------------------------------------------------

Put This Part In the BODY of Your Page. Start copying this part here:

<form name="calculator">

<table border="2" cellpadding="4" cellspacing="0" bordercolor="#000000">
<tr>
<td>
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="4">
<input type="text" name="calcResults" value="0" size="20" style="text-align: right"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" C " name="calclear" onclick="gCalculator.OnClick('c')"></td>
<td></td>
<td> </td>
<td><input class="calcBtn" type="button" value=" = " name="calequal" onclick="gCalculator.OnClick('=')"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 7 " name="cal7" onclick="gCalculator.OnClick('7')" ondblclick="gCalculator.OnClick('7')"></td>
<td><input class="calcBtn" type="button" value=" 8 " name="cal8" onclick="gCalculator.OnClick('8')" ondblclick="gCalculator.OnClick('8')"> </td>
<td><input class="calcBtn" type="button" value=" 9 " name="cal9" onclick="gCalculator.OnClick('9')" ondblclick="gCalculator.OnClick('9')"> </td>
<td><input class="calcBtn" type="button" value=" / " name="caldiv" onclick="gCalculator.OnClick('/')"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 4 " name="cal4" onclick="gCalculator.OnClick('4')" ondblclick="gCalculator.OnClick('4')"> </td>
<td><input class="calcBtn" type="button" value=" 5 " name="cal5" onclick="gCalculator.OnClick('5')" ondblclick="gCalculator.OnClick('5')"> </td>
<td><input class="calcBtn" type="button" value=" 6 " name="cal6" onclick="gCalculator.OnClick('6')" ondblclick="gCalculator.OnClick('6')"> </td>
<td><input class="calcBtn" type="button" value=" * " name="calmul" onclick="gCalculator.OnClick('*')"></td>
</tr>
<tr>
<td><input class="calcBtn" type="button" value=" 1 " name="cal1" onclick="gCalculator.OnClick('1')" ondblclick="gCalculator.OnClick('1')"> </td>
<td><input class="calcBtn" type="button" value=" 2 " name="cal2" onclick="gCalculator.OnClick('2')" ondblclick="gCalculator.OnClick('2')"> </td>
<td><input class="calcBtn" type="button" value=" 3 " name="cal3" onclick="gCalculator.OnClick('3')" ondblclick="gCalculator.OnClick('3')"> </td>
<td><input class="calcBtn" type="button" value=" + " name="calplus" onclick="gCalculator.OnClick('+')"></td>
</tr>
<tr>
<td> </td>
<td><input class="calcBtn" type="button" value=" 0 " name="cal0" onclick="gCalculator.OnClick('0')" ondblclick="gCalculator.OnClick('0')"> </td>
<td><input class="calcBtn" type="button" value=" . " name="caldec" onclick="gCalculator.OnClick('.')"></td>
<td><input class="calcBtn" type="button" value=" - " name="calminus" onclick="gCalculator.OnClick('-')"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>

Explore Personal Web Pages

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

Personal Web Pages

  1. Home
  2. Computing & Technology
  3. Personal Web Pages
  4. Templates, Scripts, Hacks
  5. Scripts: Free Copy & Paste
  6. Calculator Script - Copy and Paste JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.