Utilizarea colecțiilor Map

Să presupunem că avem următoarele paragrafe:

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

Să facem ca la click pe fiecare paragraf să i se adauge la sfârșit numărul său de ordine în lista de paragrafe. Să rezolvăm problema folosind Map.

Să începem. Mai întâi, să obținem paragrafele într-o variabilă:

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

Să creăm o nouă colecție Map:

let map = new Map;

Să umplem colecția astfel încât cheile să fie paragrafele noastre, iar valorile lor - numerele de ordine:

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

Să parcurgem paragrafele cu un ciclu și să atașăm acestora un handler pentru click:

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

Să adăugăm acum la click numărul de ordine la sfârșitul textului paragrafului. În același timp, vom obține acest număr din colecția noastră:

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

Sunt date câmpurile de introducere (input). Parcurgeți aceste input-uri cu un ciclu și creați o colecție Map, în care cheile să fie input-urile, iar valoarea - numărul lor de ordine pe pagină. Faceți astfel încât la click pe orice input, în value-ul lui să se scrie numărul său de ordine.

Sunt date câmpurile de introducere (input). În fiecare input se poate introduce un număr. La apăsarea tastei Enter, input-ul să memoreze numărul introdus. Faceți astfel încât la pierderea focusului în input, în consolă să se afișeze array-ul cu toate numerele introduse anterior în acel input.