Map kolekcijų panaudojimas

Tarkime, kad turime pastraipas:

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

Padarykime taip, kad paspaudus ant kiekvienos pastraipos, į jos pabaigą būtų įrašomas jos eilės numeris pastraipų sąraše. Išspręskime užduotį naudodami Map.

Pradėkime. Pirmiausia gausime savo pastraipas į kintamąjį:

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

Sukurkime naują Map kolekciją:

let map = new Map;

Užpildykime savo kolekciją taip, kad raktai būtų mūsų pastraipos, o jų reikšmės - eilės numeriai:

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

Pereikime per pastraipas ciklu ir uždėkime ant jų klikimo apdorotoją:

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

Dabar paspaudus pridėkime eilės numerį į pastraipos teksto pabaigą. Tai darydami gausime šį numerį iš mūsų kolekcijos:

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

Duoti įvesties laukai. Pereikite per šiuos įvesties laukus ciklu ir sukurkite Map kolekciją, kurios raktai bus įvesties laukai, o reikšmė - jų eilės numeris puslapyje. Padarykite taip, kad paspaudus ant bet kurio įvesties lauko, į jo value būtų įrašomas jo eilės numeris.

Duoti įvesties laukai. Į kiekvieną įvesties lauką galima įvesti skaičių. Tegul paspaudus Enter įvesties laukas įsimena įvestą skaičių. Padarykite taip, kad praradus fokusą įvesties lauke, konsolėje būtų išvedamas visų anksčiau įvestų į įvesties lauką skaičių masyvas.