有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].onclick=function(){
         alert('點選了第'+i+'個按鈕');     
     }
}  
 

    點選按鈕後彈出的都是第4個，原因是var定義變數i作用域造成的。

解決方法：

（1）、let定義變數的方法：

let btns=document.querySelectorAll('button');
for(let i = 0;i<btns.length;i++){
     btns[i].onclick=function(){
         alert('點選了第'+i+'個按鈕');     
     }
}  

以上寫法在IE瀏覽區不支援，其他的瀏覽器支援，點選按鈕能取到需要的值。

（2）、var定義變數的方法：

var btns=document.querySelectorAll('button');
for(var i = 0;i<btns.length;i++){
     (function(i){
         btns[i].onclick=function(){
             alert('點選了第'+i+'個按鈕');     
         }
     })(i);
}