讓li輸入正常的索引值

根據下面的代碼回答問題：

for(var i = 0;i<5;i++){
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode('Button'+i));
  btn.addEveListener('click',function(){console.log(i);});
  document.body.appendChild(btn);
}
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>

當點擊每個button的時候，在控制檯輸出的結果是5

點擊按鈕觸發回調函數，回調函數中輸出的li的引用是for循環之後全局變量中保存的i

解決方法

1.通過閉包參數傳遞參數

for(var i = 0;i<5;i++){
  var btn = document.createElement('button');
  btn.appendChild(document.createNode('Button'+i));
  btn.addEventListener('click',(function(i){
    return function(i);
})(i));
  document.body.appendChild(btn);
}

2.btn.addEventListener匿名函數

for(var i = 0;i<5;i++){
  var btn = document.create('button');
  btn.appendChild(document.createTextNode('Button'+i));
  (function(i){
    btn.addEventListener('click',function(){console.log(i);});
  })(i);
  document.body.appendChild(btn);
}

3.let i 代替 var i

for(let i = 0;i<5;i++){
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button'+i));
  btn.addEventListener('click',function(){console.log(i)});
  document.body.appendChild(btn);
}

4.對bt.addEventListener的匿名函數

['a','b','c','d','f'].forEach(function(value,i){
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button'+i));
  btn.addEventListener('click',function(){
    document.body.appendChild(btn);
  })
})