Enter two operands into the leftmost boxes, select an operator and click the button to compute the result.
Caulculator JavaScript and XHTML source code:
<script language="JavaScript" type="text/javascript"> // declare variables var add, subtract, divide, multiply; // set up the form
function initialise() {
add =document.calculateForm.operator.options[0];
subtract =document.calculateForm.operator.options[1];
divide =document.calculateForm.operator.options[2];
multiply =document.calculateForm.operator.options[3];
document.calculateForm.val1.value = 0;
document.calculateForm.val2.value = 0;
}
// check that the text box just used is filled with a number
function numberCheck(elementName) {
switch (elementName)
{
case "val1":
var tmp = parseInt(document.calculateForm.val1.value);
if (isNaN(tmp))
{
alert("Please enter a valid numerial value into the first text box.");
document.getElementById("val1").value=0; // a different way to access a form element
return false;
}
break;
case "val2":
var tmp = parseInt(document.calculateForm.val2.value);
if (isNaN(tmp))
{
alert("Please enter a valid numerial value into the second text box.");
document.calculateForm.val2.value=0;
return false;
}
break;
}
return true;
} // do the requested calculation
function calculate() {
// temporary place to store the result
var result = 0;
// convert the vales in the boxes into integers
var x = parseInt(document.calculateForm.val1.value);
var y = parseInt(document.calculateForm.val2.value);
// work out which operation needs to be performed and do it
if (add.selected) result = x + y;
else if (subtract.selected) result = x - y;
else if (multiply.selected) result = x * y;
else // (divide.selected) need to test for divide by zero request
{
if (y == 0)
{
alert ("Sorry, you cannot divide by 0!");
}
else
{
result = x / y;
}
}
document.calculateForm.val3.value = result;
}
</script> |
<body onload="initialise()">
<h2>A JavaScript Calculator</h2>
<p>Enter two operands into the leftmost boxes, select an operator and click the button to compute the result.</p>
<form action="post" name="calculateForm" id="calculateForm">
<input type="text" name="val1" value="val1" id="val1" size="10" onblur="numberCheck(name);" />
<select name="operator">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="divide">/</option>
<option value="multiply">*</option>
</select>
<input type="text" name="val2" value="val2" id="val2" size="10" onblur="numberCheck(name);" />
=
<input name="val3" type="text" size="10" readonly="readonly" />
<input type="button" value="Calculate" onclick="calculate();" />
</form></body> |