<!-- Part of javalessons.com (c)2007 SEMM(NL) All rights reserved Author:P.Hamaker For educational purposes only.-->
<html>
<head>
<script type="text/javascript">
function addm()
{
 var val1, val2, str ;
 str = document.getElementById('in1').value ;
 val1 = parseFloat( str ) ;
 str = document.getElementById('in2').value ;
 val2 = parseFloat( str ) ;
 document.getElementById('in3').value = val1 + val2 ;
}
function clr( bt )
{
 document.getElementById('in3').value = '' ;
 try {
 if ( bt.id == 'bt2' )
  java.awt.Toolkit.getDefaultToolkit().beep();
 } catch ( exc ) { }
}
</script>
</head>

<body style="font-family: sans-serif; font-size: large; margin-left: 20; margin-top: 30">
JavaScript Lesson Form, DOM and event handling
<form>
<input type="text" id="in1" maxlength="10" size="12" onkeypress="clr()" style="text-align: right">
<input type="text" id="in2" maxlength="10" size="12" onkeypress="clr()" style="text-align: right">
<input type="text" id="in3" size="22" readonly="readonly">
<p>
<input type="button" value="Addum" onclick="addm()">
<input type="button" value="Clear third" onclick="clr(this)" id="bt2">
<input type="reset" value="Clear">
</form>
</body></html>