improved code with additional comments...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="en">
<title>Calculator</title>
<style type="text/css">
table.calculator {
margin: 0 auto;
}
td.input {
width: 75%;
text-align: center;
}
td.button {
width: 25%;
}
td.button input {
height: 25px;
width: 50px;
}
</style>
<script type="text/javascript">
function buttonClick(button) {
// Add the pressed button's value to input
document.calculator.input.value += button.value;
}
function clearInput() {
// Clear input
document.calculator.input.value = '';
}
function calculateInput() {
// Evaluate input
document.calculator.input.value = eval(document.calculator.input.value);
}
function validateInputKey(e) {
// Get the character code from the event object depending which browser is used.
var asc = (e.which) ? e.which : event.keyCode;
// If the character code is for the <ENTER> key or the equals sign then perform the calculation.
if (asc == 13 || asc == 61) {
calculateInput();
// Return false so that the default browser behaviour for this event wont be called.
return false;
}
// Get string character from the character code.
var chr = String.fromCharCode(asc);
// Validates numeric characters, operators, backspace key, and the period character.
return isNumber(chr) || isOperator(chr) || asc == 8 || asc == 46;
}
function isNumber(input) {
// If the return value of parseFloat is a number and it is finite then it is a number.
return !isNaN(parseFloat(input)) && isFinite(input);
}
function isOperator(input) {
// If the position (index) of the input string is within "*/+-" then indexOf will
// return the position (index) of the input string otherwise it will return negative one.
// Thus we can use the equality of indexOf and -1, meaning if input is within "*/+-" then
// return true otherwise return false.
return "*/+-".indexOf(input) != -1;
}
</script>
</head>
<body>
<form name="calculator" action="">
<table border="1" class="calculator">
<tr>
<td class="input" colspan="3" ><input name="input" type="text" onKeypress="return validateInputKey(event)"></td>
<td class="button"><input type="button" onClick="clearInput()" value="C"></td>
</tr>
<tr>
<td class="button"><input type="button" onClick="buttonClick(this)" value="1"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="2"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="3"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="+"></td>
</tr>
<tr>
<td class="button"><input type="button" onClick="buttonClick(this)" value="4"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="5"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="6"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="-"></td>
</tr>
<tr>
<td class="button"><input type="button" onClick="buttonClick(this)" value="7"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="8"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="9"></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="*"></td>
</tr>
<tr>
<td class="button"><input type="button" onClick="buttonClick(this)" value="."></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="0"></td>
<td class="button"><input type="button" onClick="calculateInput()" value="="></td>
<td class="button"><input type="button" onClick="buttonClick(this)" value="/"></td>
</tr>
</table>
</form>
</body>
</html>