让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);
  })
})