Mapコレクションの活用

以下の段落があるとします:

html<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

各段落をクリックすると、その段落の末尾に段落リスト内の順序番号が書き込まれるようにしましょう。この課題をMapを使って解決します。

始めましょう。まず、段落を変数に取得します:

javascriptlet elems = document.querySelectorAll('p');

新しいMapコレクションを作成します:

javascriptlet map = new Map;

キーを段落、値をその順序番号としてコレクションを埋めます:

javascriptlet i = 1;
for (let elem of elems) {
  map.set(elem, i++);
}

ループで段落を反復処理し、クリックイベントリスナーを設定します:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    
  });
}

クリック時に、段落テキストの末尾に順序番号を追加するようにしましょう。この番号はコレクションから取得します:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    this.textContent += map.get(this);
  });
}