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 басқан кезде енгізу өрісі енгізілген санды есте сақтасын. Енгізу өрісінің фокусы жоғалған кезде, консольге осы енгізу өрісіне бұрын енгізілген барлық сандардың тізімі шығарылуы үшін жасаңыз.