Användning av Map-samlingar

Låt oss säga att vi har stycken:

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

Låt oss göra så att när man klickar på varje stycke skrivs dess ordningsnummer i listan över stycken i slutet av det. Låt oss lösa uppgiften med Map.

Låt oss börja. Först, låt oss hämta våra stycken i en variabel:

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

Låt oss skapa en ny Map-samling:

let map = new Map;

Låt oss fylla vår samling så att nycklarna är våra stycken och deras värden är ordningsnumren:

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

Låt oss iterera genom styckena med en loop och koppla en klickhanterare till dem:

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

Låt oss nu lägga till ordningsnumret i slutet av styckets text när man klickar. Låt oss samtidigt hämta detta nummer från vår samling:

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

Inmatningsfält är givna. Iterera genom dessa inmatningsfält med en loop och skapa en samling Map, där nycklarna kommer att vara inmatningsfälten, och värdet - deras ordningsnummer på sidan. Gör så att när man klickar på ett inmatningsfält skrivs dess ordningsnummer i dess value.

Inmatningsfält är givna. I varje inmatningsfält kan man skriva in ett nummer. Låt inmatningsfältet komma ihåg det inmatade numret när man trycker på Enter. Gör så att när inmatningsfältet förlorar fokus skrivs en array med alla tidigare inmatade nummer i inmatningsfältet ut i konsolen.