Q&A
余計なお世話かもしれませんが・・・
イベントが発生すると event オブジェクトが生成され、その参照がイベントリスナの第一引数に渡されますので、それから target プロパティでイベントを発生させたオブジェクトを取得して操作するようにしてはいかがですか？ IE ではそうしないと動かないのではないかと思います。（そもそも () => が IE ではダメそうですが）
前提・実現したいこと
ドットインストール「はじめてのJavaScript #11」のコードについてです。
https://dotinstall.com/lessons/basic_javascript_v4/50611
for文のなかにaddEventListnerがありますが、divに番号が振られている訳でもないのになぜ上手く機能しているかが分かりません。
発生している問題・エラーメッセージ
該当のソースコード
javascript
1 2<html> 3<body> 4 <script> 5 'use strict'; 6 const num = 5; 7 const winner = Math.floor(Math.random() * num); 8 9 for (let i = 0; i < num; i++) { 10 const div = document.createElement('div'); 11 div.classList.add('box'); 12 document.body.appendChild(div); 13 div.addEventListener('click', () => { 14 if (i === winner) { 15 div.textContent = 'win!' 16 div.classList.toggle('win'); 17 } else { 18 div.textContent = 'lose!' 19 div.classList.toggle('lose'); 20 } 21 }, false); 22 } 23 </script> 24</body> 25 26</html>
試したこと
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
forのループ変数をletにしているので、ループ1回毎にループ変数はそれぞれ確保されます。
addEventListenerのコールバックでは、その回にセットされたiと紐づくので、ループのiをあとからでも回収できます。
投稿2020/05/28 06:49
総合スコア146018
0
ベストアンサー
JavaScriptの関数は、実行時の環境ではなくて、定義時の環境（レキシカル環境）で実行されます。
この場合、divがconstで定義されているためブロックスコープとなり、ループごとに別の値を保持できるため、それぞれのレキシカル環境でのdivの内容が変わり、div要素を区別できています。変数iについても同様です。
これらをvarで定義すると上手くいかないはずです。
さらに詳しく知るには、「レキシカル環境」や「クロージャ」で検索してみるといいかもしれません。
参考：
クロージャ - JavaScript | MDN
JavaScript の原理：クロージャの真実 - Qiita
投稿2020/05/28 07:02
編集2020/05/28 07:04
総合スコア36960
あなたの回答
tips
プレビュー
