看看这个索引问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    .s_btn {
    background: url("img/i-1.0.0.png") repeat scroll 0 0 #DDDDDD;
    cursor: pointer;
    font-size: 14px;
    height: 32px;
    width: 95px;
    }
    .s_ipt_wr {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("i-1.0.0.png") no-repeat scroll -304px 0 transparent;
    border-color: #9A9A9A #CDCDCD #CDCDCD #9A9A9A;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 30px;
    margin-right: 5px;
    vertical-align: top;
    width: 418px;
}
input {
    border: 0 none;
    padding: 0;
}
#language{
    border:1px solid blue; position:relative;
}
#change{
    position:absolute;
top:24px;
left:-50px;
list-style:none;
margin:0px;
padding:0px;
width:60px;
border:1px solid blue;
border-bottom:none;
display:none;
}
#change.active{display:block;}
#change li {border-bottom:1px solid blue;}
#change li.current{background:gray;}
  </style>
  <script type="text/javascript">
  <!--
    window.onload=function(){
var language = document.getElementById("language");
        var change=document.getElementById("change");
        var on=document.getElementById("on");
        var lis=document.getElementsByTagName("li");
        language.onclick=function(){
            change.className='active';
        }
        for(var i=0;i<lis.length;i++){
lis[i].index = i;
            lis[i].onmouseover=function(){
alert(i)
for(i=0;i<lis.length;i++){
lis[i].className='';
};
this.className='current';
            }
            lis[i].onclick=function(){
alert(i)
                if(this.index==2){
                    on.innerHTML='输入法';
                }else{
                    on.innerHTML=this.innerHTML;
                }
change.className='';
            }
        };
    };
  //-->
  </script>
 </head> <body>
    <div style="text-align:center;">
<img src="baidu_sylogo1.gif"/></br/>
</div>
    <div style="text-align:center;">
        <span class="s_ipt_wr"><input/></span>
        <input type="button" class="s_btn" value="百度一下"/>
         <a id="on" href="javascript:;">输入法</a>
 <span id="language">
            <ul id="change">
                <li>手写</li>
                <li>拼音</li>
                <li>关闭</li>
            </ul>
         </span>
         
    </div>
 </body>
</html>
在2个alert处的i为什么会一直输出3这个数字？？？？在for循环中的i一直都不可能等于3啊 因为长度为3  i走到 2的时候就会停止循环 求解 求解  说详细点 谢谢了