Map kolleksiyalarının tətbiqi

Tutaq ki, bizim abzaslarımız var:

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

Gəlin elə edək ki, hər bir abzasın üzərinə kliklədikdə onun sonuna abzaslar siyahısındakı sıra nömrəsi yazılsın. Məsələni Map ilə həll edək.

Başlayaq. Əvvəlcə abzaslarımızı dəyişənə əldə edək:

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

Yeni Map kolleksiyası yaradaq:

let map = new Map;

Kolleksiyamızı elə dolduraq ki, açar kimi abzaslarımız, dəyər kimi isə onların sıra nömrələri olsun:

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

Abzasları dövrə ilə gəzib onlara klik üçün hadisə əlavə edək:

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

Gəlin indi klik zamanı abzasın mətninin sonuna sıra nömrəsini əlavə edək. Bunu edərkən nömrəni kolleksiyamızdan əldə edək:

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

Inputlar verilib. Bu inputları dövrə ilə gəzin və Map kolleksiyası yaradın, bu kolleksiyada açarlar inputlar, dəyərlər isə onların səhifədəki sıra nömrələri olsun. Elə edin ki, hər hansı bir inputun üzərinə kliklədikdə onun value-na onun sıra nömrəsi yazılsın.

Inputlar verilib. Hər bir inputa ədəd daxil etmək olar. Enter düyməsinə basdıqda input daxil edilmiş ədədi xatırlasın. Elə edin ki, input fokusu itirdikdə konsola əvvəllər həmin inputa daxil edilmiş bütün ədədlərin massivi çap olunsun.