Javascript Calculator

JavaScript Calculator

For a demo of the JavaScript calculator, click here
*You must have a JavaScript enabled browser for the JavaScript Calculator demo to work.

This calculator was created during a MindLeaders JavaScript tutorial. For more information on Mindreaders Tutorials and Training, go to:
http://www.mindleaders.com

JavaScript Calculator Source Code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>JavaScript Calculator</title>
<script type=”text/javascript”>

var total = 0;
var lastOperation = “+”;
var newnumber = true;

function enterNumber(digit) {
var form = digit.form;
if (newnumber) {
clearNumber(form);
newnumber = false;
}
form.display.value = form.display.value + digit.name;
}

function clear(form) {
total = 0;
lastOperation = “+”;
form.display.value = “”;
}

function clearNumber(form) {
form.display.value = “”;
}

function calculate(operation) {
var form = operation.form;
var expression = total + lastOperation + form.display.value;
lastOperation = operation.value;
total = eval(expression);
form.display.value = total;
newnumber = true;
}

</script>
</head>

<body>
<h1>JavaScript Calculator</h1>
<form>
<table border=”1″>
<tr>
<td colspan=”4″>
<input name=”display” onfocus=”this.blur();” type=”text” value=”” />
</td>
</tr>
<tr>
<td>
<input name=”7″ onclick=”enterNumber(this);” type=”button” value=” 7 ” />
</td>
<td>
<input name=”8″ onclick=”enterNumber(this);” type=”button” value=” 8 ” />
</td>
<td>
<input name=”9″ onclick=”enterNumber(this);” type=”button” value=” 9 ” />
</td>
<td>
<input name=”+” onclick=”calculate(this);” type=”button” value=” + ” />
</td>
</tr>
<tr>
<td>
<input name=”4″ onclick=”enterNumber(this);” type=”button” value=” 4 ” />
</td>
<td>
<input name=”5″ onclick=”enterNumber(this);” type=”button” value=” 5 ” />
</td>
<td>
<input name=”6″ onclick=”enterNumber(this);” type=”button” value=” 6 ” />
</td>
<td>
<input name=”-” onclick=”calculate(this);” type=”button” value=” – ” />
</td>
</tr>
<tr>
<td>
<input name=”1″ onclick=”enterNumber(this);” type=”button” value=” 1 ” />
</td>
<td>
<input name=”2″ onclick=”enterNumber(this);” type=”button” value=” 2 ” />
</td>
<td>
<input name=”3″ onclick=”enterNumber(this);” type=”button” value=” 3 ” />
</td>
<td>
<input name=”*” onclick=”calculate(this);” type=”button” value=” * ” />
</td>
</tr>
<tr>
<td>
<input name=”0″ onclick=”enterNumber(this);” type=”button” value=” 0 ” />
</td>
<td>
<input name=”C” onclick=”clear(this.form);” type=”button” value=” C ” />
</td>
<td>
<input name=”CE” onclick=”clearNumber(this.form);” type=”button” value=”CE” />
</td>
<td>
<input name=”/” onclick=”calculate(this);” type=”button” value=” / ” />
</td>
</tr>
</table>
</form>

<p>This calculator was created during a MindLeaders JavaScript tutorial. For
more information on Mindreaders Tutorials and Training, go to:
<a href=”http://www.mindleaders.com”>http://www.mindleaders.com</a> </p>
<p>&lt;form&gt;<br />
&lt;table border=”1″&gt;<br />
&lt;tr&gt;<br />
&lt;td colspan=”4″&gt;<br />
&lt;input name=”display” onfocus=”this.blur();” type=”text” value=”” /&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;<br />
&lt;input name=”7″ onclick=”enterNumber(this);” type=”button” value=” 7 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”8″ onclick=”enterNumber(this);” type=”button” value=” 8 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”9″ onclick=”enterNumber(this);” type=”button” value=” 9 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”+” onclick=”calculate(this);” type=”button” value=” + ” /&gt;<br
/>
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;<br />
&lt;input name=”4″ onclick=”enterNumber(this);” type=”button” value=” 4 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”5″ onclick=”enterNumber(this);” type=”button” value=” 5 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”6″ onclick=”enterNumber(this);” type=”button” value=” 6 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”-” onclick=”calculate(this);” type=”button” value=” – ” /&gt;<br
/>
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;<br />
&lt;input name=”1″ onclick=”enterNumber(this);” type=”button” value=” 1 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”2″ onclick=”enterNumber(this);” type=”button” value=” 2 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”3″ onclick=”enterNumber(this);” type=”button” value=” 3 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”*” onclick=”calculate(this);” type=”button” value=” * ” /&gt;<br
/>
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;<br />
&lt;input name=”0″ onclick=”enterNumber(this);” type=”button” value=” 0 “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”C” onclick=”clear(this.form);” type=”button” value=” C “
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”CE” onclick=”clearNumber(this.form);” type=”button” value=”CE”
/&gt;<br />
&lt;/td&gt;<br />
&lt;td&gt;<br />
&lt;input name=”/” onclick=”calculate(this);” type=”button” value=” / ” /&gt;<br
/>
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
&lt;/form&gt;<br />
</p>

</body>

</html>

0
  Related Posts