Primena Map kolekcija

Recimo da imamo paragrafe:

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

Hajde da napravimo tako da klikom na svaki paragraf u njegov kraj bude upisan njegov redni broj u listi paragrafa. Rešimo zadatak preko Map kolekcije.

Počnimo. Prvo, preuzmimo naše paragrafe u varijablu:

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

Kreirajmo novu Map kolekciju:

let map = new Map;

Popunimo našu kolekciju tako da ključevi budu naši paragrafi, a njihove vrednosti - redni brojevi:

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

Prođimo kroz paragrafe petljom i postavimo na njih osluškivač klika:

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

Hajde da sada na klik dodajemo redni broj na kraj teksta paragrafa. Pritom ćemo dobijati taj broj iz naše kolekcije:

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

Zadati su input elementi. Prođite kroz ove inpute petljom i kreirajte kolekciju Map, u kojoj će ključevi biti input elementi, a vrednost - njihov redni broj na stranici. Uredite tako, da klikom na bilo koji input u njegov value bude upisan njegov redni broj.

Zadati su input elementi. U svaki input je moguće uneti broj. Neka pritiskom na Enter input zapamti uneti broj. Uredite tako, da gubitkom fokusa na inputu u konzolu bude ispisana lista svih ranije u input unetih brojeva.