js addeventlistenerの挙動がわからない

Question

htmlにliタグが20個あるのでそれらを押すと何個目のliか表示したいのですがすべて20と出ます

なぜでしょうか

const get_li = document.getElementsByTagName('li');

for(var i = 0; i < 20; ++i) {
  get_li[i].addEventListener("click", function(){cul(i)});
}


function cul(i){
  console.log(i);
}

Answer 1

（IEでは書き換えても動かないですが）var iをlet iに変えてください。

varで書いた変数は関数スコープですので、ループが終わったあとで20になったiを全部のリスナーが参照する、ということになります。

一方、ループ変数をletとすると、ループ1回毎に別な変数として扱われますので、リスナーが参照するiも、その時のループの値で保存されるようになります。

Comments

[dda]

ありがとうございました！

Answer 2

// for(var i = 0; i < 20; ++i)
//      ↓
   for(let i = 0; i < 20; ++i)

【JavaScript で陥りやすい失敗例を振り返る - Qiita】
https://qiita.com/yuki153/items/c909c54204eaab6ca1b2#addeventlistener-を-for-文で複数生成時

Comments

[dda]

ありがとうございました