May 5th, 2006
Build a Basic Calculator With JavaScript
Here's some rather simple HTML & JavaScript code I've found to include a fairly basic but functional calculator on any web page.
You could extend this any way you need to, but this will provide you with the basic template to use. The basic calculator looks and works like this:
<form name="Calc" id="Calc">
<table border="4">
<tr>
<td>
<input type="text" name="Input" size="16" />
<br /></td>
</tr>
<tr>
<td>
<input type="button" name="one" value=" 1 " onclick="Calc.Input.value += '1'" />
<input type="button" name="two" value=" 2 " onclick="Calc.Input.value += '2'" />
<input type="button" name="three" value=" 3 " onclick="Calc.Input.value += '3'" />
<input type="button" name="plus" value=" + " onclick="Calc.Input.value += ' + '" />
<br />
<input type="button" name="four" value=" 4 " onclick="Calc.Input.value += '4'" />
<input type="button" name="five" value=" 5 " onclick="Calc.Input.value += '5'" />
<input type="button" name="six" value=" 6 " onclick="Calc.Input.value += '6'" />
<input type="button" name="minus" value=" - " onclick="Calc.Input.value += ' - '" />
<br />
<input type="button" name="seven" value=" 7 " onclick="Calc.Input.value += '7'" />
<input type="button" name="eight" value=" 8 " onclick="Calc.Input.value += '8'" />
<input type="button" name="nine" value=" 9 " onclick="Calc.Input.value += '9'" />
<input type="button" name="times" value=" x " onclick="Calc.Input.value += ' * '" />
<br />
<input type="button" name="clear" value=" c " onclick="Calc.Input.value = "" />
<input type="button" name="zero" value=" 0 " onclick="Calc.Input.value += '0'" />
<input type="button" name="DoIt" value=" = " onclick="Calc.Input.value = eval(Calc.Input.value)" />
<input type="button" name="div" value=" / " onclick="Calc.Input.value += ' / '" />
<br /></td>
</tr>
</table>
</form>
<table border="4">
<tr>
<td>
<input type="text" name="Input" size="16" />
<br /></td>
</tr>
<tr>
<td>
<input type="button" name="one" value=" 1 " onclick="Calc.Input.value += '1'" />
<input type="button" name="two" value=" 2 " onclick="Calc.Input.value += '2'" />
<input type="button" name="three" value=" 3 " onclick="Calc.Input.value += '3'" />
<input type="button" name="plus" value=" + " onclick="Calc.Input.value += ' + '" />
<br />
<input type="button" name="four" value=" 4 " onclick="Calc.Input.value += '4'" />
<input type="button" name="five" value=" 5 " onclick="Calc.Input.value += '5'" />
<input type="button" name="six" value=" 6 " onclick="Calc.Input.value += '6'" />
<input type="button" name="minus" value=" - " onclick="Calc.Input.value += ' - '" />
<br />
<input type="button" name="seven" value=" 7 " onclick="Calc.Input.value += '7'" />
<input type="button" name="eight" value=" 8 " onclick="Calc.Input.value += '8'" />
<input type="button" name="nine" value=" 9 " onclick="Calc.Input.value += '9'" />
<input type="button" name="times" value=" x " onclick="Calc.Input.value += ' * '" />
<br />
<input type="button" name="clear" value=" c " onclick="Calc.Input.value = "" />
<input type="button" name="zero" value=" 0 " onclick="Calc.Input.value += '0'" />
<input type="button" name="DoIt" value=" = " onclick="Calc.Input.value = eval(Calc.Input.value)" />
<input type="button" name="div" value=" / " onclick="Calc.Input.value += ' / '" />
<br /></td>
</tr>
</table>
</form>
Digg this
post to del.icio.us