|
<html>
<head>
<title>JavaScript
Example 3</title>
<script
language="JavaScript">
<!--
function addit() {
val1 = document.ADDUP.add1.value;
val2 = document.ADDUP.add2.value;
document.pict1.src
= "balls" + val1 + ".gif";
document.pict2.src = "balls" +
val2 + ".gif";
// check if the first radio button (addition) is checked
if (document.ADDUP.operation[0].checked)
{
document.ADDUP.sum.value = eval(val1) + eval(val2);
document.pict3.src
= "balls" + document.ADDUP.sum.value + ".gif";
}
else
{
// the subtraction radio button was checked
document.ADDUP.sum.value = eval(val1) - eval(val2);
document.pict3.src
= "blank.gif";
}
}
function clearfields() {
document.ADDUP.add1.value = "0";
document.ADDUP.add2.value = "0";
document.ADDUP.sum.value = "0";
}
-->
</script>
</head>
<body>
<form
NAME="ADDUP">
<p>
<input type="radio" name="operation"
checked value="add" onClick="addit();">
addition <br>
<input type="radio" name="operation"
value="subtract" onClick="addit();">
subtraction <br>
First number: <select
name="add1"
size="1" onChange="addit();">
<option selected value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<img src="blank.gif" name="pict1"> <br>
Second number: <select
name="add2"
size="1" onChange="addit();">
<option selected value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<img src="blank.gif" name="pict2">
<br>
Answer: <input name="sum"
size="20">
<img src="blank.gif" name="pict3">
<br>
<input type="button" value="Add
them up" onClick="addit();">
<input type="button"
value="Reset"
onClick="clearfields();">
</p>
</form>
</body>
</html>
|