for文で回したうえでクリックイベントを行うとIEとchrome で違う値が出力される。

Question

for文で回したうえでクリックイベントを行うとIEとchrome で違う値が出力されました。

コードは下記になります。

<script>
    const el = document.querySelectorAll('.el') // 5つあるクラス
    for (let i = 0; i < el.length; i++) {
        console.log(i) // => 0, 1, 2, 3, 4
        el[i].addEventListener('click', function() {
            console.log(i) // クリックされた要素の順番のはずがIEだと「5」が出る。
            console.log(el[i]) // そのためIEではundifind　
        })
        
    }
</script>

const let を var に変更したりしましたが、結果は変わりませんでした。

この書き方がいけないのでしょうか？
ブラウザ間の差ということで仕方ないのでしょうか？

結果的にやりたいことは解決しているのですが、その原因が納得いかず、質問させていただきました。

Answer 1

ブラウザ間の差ということで仕方ないのでしょうか？

はい、IEは「for文内のletのスコープ」を正しく実装していません。

Comments

[maisumakun]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let#browser_compatibility

[maisumakun]

> この書き方がいけないのでしょうか？

文法的には全く正しいです。IE側の問題です。

[progblog]

ご回答ありがとうございます。

<script>
var el = document.querySelectorAll('.el') // 5つあるクラス
for (var i = 0; i < el.length; i++) {
console.log(i) // => 0, 1, 2, 3, 4
el[i].addEventListener('click', function() {
console.log(i) // クリックされた要素の順番のはずがIEだと「5」が出る。
console.log(el[i]) // そのためIEではundifind　
})

}
</script>

念のため全ての定義をvar に変更してみましたが、結果は変わりませんでした。
つまりIEを考えると上記の値の取り方はしてはいけないということですね.......
ありがとうございました！

[maisumakun]

> 念のため全ての定義をvar に変更してみましたが、結果は変わりませんでした。

むしろ、varで書いた場合はChromeでもIEと同様の動作（どれを押してもi=5）になります。