求助如何实现结构和行为的分离

Question

<div>
 <script type="text/javascript">
 document.write("<HR>");
 document.write("<H3>计算器输入界面</H3>");
 document.write("<HR>");
 document.write('<FORM NAME="CALCULATOR">');
 document.write('<INPUT TYPE="text" NAME="box" SIZE=15><BR>');
 document.write('<INPUT TYPE="button" VALUE=" 7 " onClick="dispCal(7)">');
 document.write('<INPUT TYPE="button" VALUE=" 8 " onClick="dispCal(8)">');
 document.write('<INPUT TYPE="button" VALUE=" 9 " onClick="dispCal(9)"><BR>');
 document.write('<INPUT TYPE="button" VALUE=" 4 " onClick="dispCal(4)">');
 document.write('<INPUT TYPE="button" VALUE=" 5 " onClick="dispCal(5)">');
 document.write('<INPUT TYPE="button" VALUE=" 6 " onClick="dispCal(6)"><BR>');
 document.write('<INPUT TYPE="button" VALUE=" 1 " onClick="dispCal(1)">');
 document.write('<INPUT TYPE="button" VALUE=" 2 " onClick="dispCal(2)">');
 document.write('<INPUT TYPE="button" VALUE=" 3 " onClick="dispCal(3)"><BR>');
 document.write('<INPUT TYPE="button" VALUE=" 0 " onClick="dispCal(0)">');
 document.write('<INPUT TYPE="button" VALUE=" + " onClick="dispCal(',"'+'",')">');
 document.write('<INPUT TYPE="button" VALUE=" - " onClick="dispCal(',"'-'",')"><BR>');
 document.write('<INPUT TYPE="button" VALUE=" * " onClick="dispCal(',"'*'",')">');
 document.write('<INPUT TYPE="button" VALUE=" / " onClick="dispCal(',"'/'",')">');
 document.write('<INPUT TYPE="button" VALUE=" = " onClick="dispCal(',"'='",')"><BR>');
 document.write('<INPUT TYPE="button" VALUE=" squre " onClick="dispCal(',"'s'",')">');
 document.write('</FORM>');
 document.write("<HR>");
 </script>
</div>
请问怎样将ONCLICK语句放到外面的.js中去

Answer 1

var ipts = document.getElementsByTagName("INPUT");
if(ipts&&ipts.length>0){
    for(var i=0,l=ipts.length;i<l;i++){
       var ipt = ipts[i]
       if(ipt.type=="button"){
           ipt.onclick = iptOnClick;
        }
    }
}function iptOnClick(){
   dispCal(this.value);
}