Simple JavaScript Calculator

Posted At : 30 August 2008 00:26 | Posted By : Jonny Shaw
Related Categories: Coldfusion Tutorials , JavaScript

Here i have a very simple script for a JavaScript calculator

It is a pretty basic script that uses a text field to create the equation with the buttons and then equates the equation to show you the answer.

There is also a Memory Store (MS), Memory Recall (MR), and a Memory Clear (MC). For those of you that may require it

<form name="Calc">
<input name="store" type="hidden" value="">
<div align="center">
<table border="0" cellpadding="0" cellspacing="5" id="Calculator">

<tr>
<td colspan="6"><div align="center">
<input id="Calcdisplay" name="Display" type="text" size="25" />
</div></td>
</tr>
<tr>
<td><div align="center">
<!-- By clicking on one of the buttons below the page takes the value from the display field and adds to it the value assigned to that button -->
<input id="Calcbtn" type="button" name="1" value="1" OnClick="Calc.Display.value += '1'">

</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="2" value="2" OnClick="Calc.Display.value += '2'">
</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="3" value="3" OnClick="Calc.Display.value += '3'">
</div></td>
<td>&nbsp;</td>
<td><div align="center">

<input id="Calcbtn" type="button" name="+" value="+" OnClick="Calc.Display.value += ' + '">
</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="-" value="-" OnClick="Calc.Display.value += ' - '">
</div></td>
</tr>
<tr>
<td><div align="center">
<input id="Calcbtn" type="button" name="4" value="4" OnClick="Calc.Display.value += '4'">

</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="5" value="5" OnClick="Calc.Display.value += '5'">
</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="6" value="6" OnClick="Calc.Display.value += '6'">
</div></td>
<td>&nbsp;</td>
<td><div align="center">

<input id="Calcbtn" type="button" name="*" value="*" OnClick="Calc.Display.value += ' * '">
</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="/" value="/" OnClick="Calc.Display.value += ' / '">
</div></td>
</tr>
<tr>
<td><div align="center">
<input id="Calcbtn" type="button" name="7" value="7" OnClick="Calc.Display.value += '7'">

</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="8" value="8" OnClick="Calc.Display.value += '8'">
</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="9" value="9" OnClick="Calc.Display.value += '9'">
</div></td>
<td>&nbsp;</td>
<td><div align="center">

<!-- To store values the page copies the value from the display field and inserts it into a hidden field named store. to retieve the stored value the page copies the value from the store and adds it to the value in the display -->
<input id="Calcbtn" type="button" name="MS" value="MS" OnClick="Calc.store.value = Calc.Display.value ">
</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="MR" value="MR" OnClick="Calc.Display.value = Calc.Display.value += Calc.store.value">
</div></td>
</tr>
<tr>
<td><div align="center">

<!-- This button sets the display field to nothing -->
<input id="Calcbtn" type="button" name="C" value="C" OnClick="Calc.Display.value = ''">
</div></td>
<td><div align="center">
<input id="Calcbtn" type="button" name="0" value="0" OnClick="Calc.Display.value += '0'">
</div></td>
<td><div align="center">
<!-- This button calculates the sum, it does this by using the eval function and displays the result in the dsplay field -->
<input id="Calcbtn" type="button" name="=" value="=" OnClick="Calc.Display.value = eval(Calc.Display.value)">

</div></td>
<td>
<td>
<td><div align="center">
<!-- This button sets the hidden store field to nothing -->
<input id="Calcbtn" type="button" name="MC" value="MC" OnClick="Calc.store.value = ''">
</div></td>
</tr>
</table>

</div>
</form>

Hope you all enjoy this script

Comments ( 1 ) | Send | del.icio.us | Digg It! | Linking Blogs | 3108 Views

Related Blog Entries

Comments
[Add Comment]
Phil W. Lowder's Gravatar Thanks you Jonny, I've been playing around with the code and have learned
from doin so.
# Posted By Phil W. Lowder | 23/11/08 21:50
[Add Comment]

Archives By Subject

Advertising (4) [RSS]
Blog Design (1) [RSS]
CFProject Scripts (2) [RSS]
Coldfusion Charts (3) [RSS]
Coldfusion Functions (5) [RSS]
Coldfusion Overview (1) [RSS]
Coldfusion Tutorials (17) [RSS]
For Sale (2) [RSS]
Image Manipulation (1) [RSS]
Java (1) [RSS]
JavaScript (4) [RSS]
PHP (1) [RSS]
Railo (2) [RSS]
SQL (1) [RSS]
Useful Tools (3) [RSS]

Recent Comments

Hashing Passwords
Richard Lord said: You really need to salt the passwords before hashing them, otherwise you're exposed to a rainbow-tab... [More]

Using Railo and Resin with domain aliases
Jonny Shaw said: Thanks for that. I am already using <host regexp="(.+)"> <host-name>${ho... [More]

Using Railo and Resin with domain aliases
Gert Franz said: Hi Jonny, it's even easier if you do it this way: <host id="allmead.com" root-dir... [More]

BlogCFC on Railo
Jonny Shaw said: Thanks for the advice ray. I was surprised at how easily BlogCFC went accross to to railo. The onl... [More]

BlogCFC on Railo
Gert Franz said: Congratulations to your new websites. I just wanted to add two things: CFIMAGE and CFCHART are suppo... [More]

Recent Entries

No recent entries.
ColdFusion Blog | ColdFusion Hosting | ColdFusion Q & A