Map колекцияларидан фойдаланиш

Бизда абзацлар бор деб фараз қилайлик:

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

Келинг, ҳар бир абзац босилганда унга абзацлар рўйхатидаги тартиб рақами ёзилишини таъминлайлик. Масалани Map орқали ечамиз.

Бошлаймиз. Аввало абзацларимизни ўзгарувчига оламиз:

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

Янги Map колекцияси яратамиз:

let map = new Map;

Колекциянимизни шундай тўлдирамизки, калитлар абзацларимиз бўлсин, қийматлари эса уларнинг тартиб рақамлари:

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

Абзацларни цикл билан айлантириб уларга клик ҳодисаси ишловчисини ўрнатамиз:

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

Энди клик бўлганда тартиб рақамини абзац матинининг охирига қўшайлик. Бундай қилиш учун рақамни бизнинг колекциямиздан оламиз:

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

Инпутлар берилган. Ушбу инпутларни цикл билан айлантиринг ва Map колекциясини яратинг, унинг калитлари инпутлар бўлсин, қиймати эса саҳифадаги тартиб рақами. Ҳар қандай инпут босилганда унинг value сига ўзининг тартиб рақами ёзилишини таъминланг.

Инпутлар берилган. Ҳар бир инпутга рақам киритиш мумкин. Enter тугмаси босилганда инпут киритилган рақамни эслаб қолсин. Инпут фокусини йўқотганда консолга инпутга илгари киритилган барча рақамлар массиви чиқарилишини таъминланг.