Zastosowanie kolekcji Map

Załóżmy, że mamy akapity:

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

Sprawmy, aby po kliknięciu na każdy akapit na jego końcu zapisywał się jego kolejny numer na liście akapitów. Rozwiążmy zadanie za pomocą Map.

Zacznijmy. Na początku pobierzmy nasze akapity do zmiennej:

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

Stwórzmy nową kolekcję Map:

let map = new Map;

Wypełnijmy naszą kolekcję tak, aby kluczami były nasze akapity, a ich wartościami - kolejne numery:

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

Przejdźmy pętlą przez akapity i powieśmy na nich obsługę kliknięcia:

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

Dodajmy teraz po kliknięciu kolejny numer na koniec tekstu akapitu. Przy tym będziemy pobierać ten numer z naszej kolekcji:

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

Dane są inputy. Przejdź przez te inputy pętlą i stwórz kolekcję Map, w której kluczami będą inputy, a wartością - ich kolejny numer na stronie. Spraw, aby po kliknięciu na dowolny input do jego value zapisywał się jego kolejny numer.

Dane są inputy. Do każdego inputa można wprowadzić liczbę. Niech po naciśnięciu Enter input zapamiętuje wprowadzoną liczbę. Spraw, aby po utracie fokusu w inpucie w konsoli wyświetlała się tablica wszystkich wcześniej wprowadzonych do inputa liczb.