for文とイベントリスナーを組み合わせたＪＳコードのIE11での挙動について

Question

次のコードをIE（バージョン：11.0.9600.19356）で実行したところエラーが表示されました。

<div>aaa</div>
<div>bbb</div>
<div>ccc</div>

const div = document.querySelectorAll("div");

for(let i = 0; i < div.length; i++) {
  div[i].addEventListener("click", function() {
    div[i].classList.add("add");
  })
}

表示されたエラーメッセージはこちら

未定義またはnull参照のプロパティ'classList'は取得できません

このコードは、ChromeでもFirefoxでも正常に動きましたが、IEではエラーになりました。
そこで、for文の中のクラスを追加するコードをコメントアウトし、代わりに次のコードを追記しました。

console.log(i);

すると、いずれのdivタグを押しても、IEではコンソールに3が表示されます。ChromeとFirefoxでは期待通りに0, 1, 2が表示されます。

この原因はなんですか？

Answer 1

この原因はなんですか？

IE 11では、letをfor文の中で回した時にスコープを切り分ける処理が実装されていません（機能対応表）。

Babelでトランスパイルするか、即時関数でスコープを切るかが必要となります。

for(let j = 0; j < div.length; j++) {
  (function(i){
    div[i].addEventListener("click", function() {
      div[i].classList.add("add");
    })
  })(j);
}

Answer 2

<script>
window.addEventListener('DOMContentLoaded', function(e){
  const div = document.querySelectorAll("div");
  for(let i = 0; i < div.length; i++) {
    div[i].addEventListener("click", function(){
      this.classList.add("add");
    });
  }
});
</script>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>

もっと単純に書くなら

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll("div"),function(x){
    x.addEventListener("click", function(){
      this.classList.add("add");
    });
  });
});
</script>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>a

Comments

[maisumakun]

たしかに、iを直接使うわけではないので、thisの参照にしてしまうのもありですね。