Simple JavaScript Calculator
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> </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> </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> </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>
<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> </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> </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> </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
There are no comments for this entry.
[Add Comment]