Build a Basic Calculator With JavaScript

by admin on July 24, 2009 · 0 comments

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>

Previous post:

Next post: