Mapコレクションの活用

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

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

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

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

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

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

let map = new Map;

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

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

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

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

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

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

入力フィールドが与えられます。これらの入力フィールドをループで処理し、キーが入力フィールド、値がページ上の順序番号となるMapコレクションを作成してください。どの入力フィールドをクリックしても、そのvalueに順序番号が入力されるようにしてください。

入力フィールドが与えられます。各入力フィールドには数値を入力できます。Enterキーを押すと、入力フィールドは入力された数値を記憶するようにします。入力フィールドがフォーカスを失ったときに、その入力フィールドに入力されたこれまでのすべての数値の配列がコンソールに出力されるようにしてください。