Code:
<html>
<head>
<title>Average Boxes - Demo</title>
<style type="text/css">
input{
width:4em;
display:block
}
</style>
<script type="text/javascript">
function averageBoxes(){
var avg=(Math.abs(document.boxes.textBox1.value)+Math.abs(document.boxes.textBox2.value)+Math.abs(document.boxes.textBox3.value)+Math.abs(document.boxes.textBox4.value))/4
if (avg!==avg)
alert('Numbers Only Please!')
document.boxes.textBox5.value=avg
}
</script>
</head>
<body onload="averageBoxes()">
<form name="boxes">
Value 1:<input name="textBox1" value=15 onkeyup="averageBoxes()" type="text">
Value 2:<input name="textBox2" value=10 onkeyup="averageBoxes()" type="text">
Value 3:<input name="textBox3" value=25 onkeyup="averageBoxes()" type="text">
Value 4:<input name="textBox4" value=20 onkeyup="averageBoxes()" type="text">
Avg Val:<input name="textBox5" readonly type="text">
</body>
</html>
If, as you say, the boxes are prefilled when the page loads and you don't want the user to be able to change the values at that point, you could make all the boxes readonly and get rid of the onkeyup events.
Bookmarks