js中for循环获取到的值都是最后一个解决方法

有5个按钮：

<div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
 </div>

一、var定义变量的方法：

var btns=document.querySelectorAll('button');
for(var i = 0;i<btns.length;i++){
     btns[i].οnclick=function(){
         alert('点击了第'+i+'个按钮');     
     }
}  

    点击按钮后弹出的都是第4个，原因是var定义变量i作用域造成的。

解决方法：

（1）、let定义变量的方法：

let btns=document.querySelectorAll('button');
for(let i = 0;i<btns.length;i++){
     btns[i].οnclick=function(){
         alert('点击了第'+i+'个按钮');     
     }
}  

以上写法在IE浏览区不支持，其他的浏览器支持，点击按钮能取到需要的值。

（2）、var定义变量的方法：

var btns=document.querySelectorAll('button');
for(var i = 0;i<btns.length;i++){
     (function(i){
         btns[i].οnclick=function(){
             alert('点击了第'+i+'个按钮');     
         }
     })(i);
}  

以上写法支持IE浏览器