js变量作用域的问题

Question

<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input type="button" value="button4" />
<input type="button" value="button5" />
<input type="button" value="button6" />
<input type="button" value="button7" />
<script language="javascript">
var el=document.getElementsByTagName("input");
for(var i=0;i<el.length;i++){
  el[i].onclick=function(){alert(i)}
}
</script>
我的本意是想点击Button时分别弹出0，1，2，3，4，5，6，但是现在我点击的时候老是弹出7，这是为什么？

Answer 1

闭包问题
<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input type="button" value="button4" />
<input type="button" value="button5" />
<input type="button" value="button6" />
<input type="button" value="button7" />
<script language="javascript">
var el=document.getElementsByTagName("input");
for(var i=0;i <el.length;i++){
  el[i].onclick=function(a){
    return function(){alert(a+1)};
  }(i)
} 
</script>

Answer 2

闭包.你调用
 el[i].onclick=function(a){
    return function(){alert(a+1)};
  }(i)
的时候a已经为length值了

Answer 3

把循环体改成这样el[i].onclick=function(idx){return function(){alert(idx + 1);};}(i);教科书上的闭包应用吧...

Answer 4

更好的方法<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input type="button" value="button4" />
<input type="button" value="button5" />
<input type="button" value="button6" />
<input type="button" value="button7" />
<script language="javascript">
var el=document.getElementsByTagName("input");
for(var i=0;i <el.length;i++){
  el[i].onclick=function(){
    alert(this.value);
  }
} 
</script>