Anwendung von Map-Collections

Nehmen wir an, wir haben Absätze:

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

Lassen Sie uns bewirken, dass bei einem Klick auf jeden Absatz seine laufende Nummer in der Liste der Absätze an sein Ende geschrieben wird. Lösen wir die Aufgabe mit Map.

Fangen wir an. Zuerst holen wir unsere Absätze in eine Variable:

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

Erstellen wir eine neue Map-Collection:

let map = new Map;

Füllen wir unsere Collection so, dass die Schlüssel unsere Absätze sind und ihre Werte die laufenden Nummern sind:

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

Durchlaufen wir die Absätze mit einer Schleife und hängen einen Klick-Eventhandler an sie:

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

Lassen Sie uns nun bei einem Klick die laufende Nummer an das Ende des Absatztextes anhängen. Dabei holen wir diese Nummer aus unserer Collection:

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

Es sind Inputs gegeben. Durchlaufen Sie diese Inputs mit einer Schleife und erstellen Sie eine Map-Collection, in der die Schlüssel die Inputs sind und der Wert deren laufende Nummer auf der Seite. Sorgen Sie dafür, dass bei einem Klick auf einen beliebigen Input in dessen value seine laufende Nummer geschrieben wird.

Es sind Inputs gegeben. In jeden Input kann eine Zahl eingegeben werden. Bei einem Druck auf Enter soll der Input die eingegebene Zahl speichern. Sorgen Sie dafür, dass beim Verlust des Fokus im Input in der Konsole ein Array aller zuvor in den Input eingegebenen Zahlen ausgegeben wird.