Коллексияҳои 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);
	});
}

Input-ҳо дода шудаанд. Ин input-ҳоро бо давр такрор кунед ва коллексияи Map эҷод кунед, ки калидҳои он input-ҳо бошанд ва арзиши онҳо - рақами тартибии онҳо дар саҳифа. Чунон кунед, ки ба ҳар як input клик кардан ба value-и он рақами тартибии он навишта шавад.

Input-ҳо дода шудаанд. Ба ҳар як input метавон рақам ворид кард. Бигзор бо пахш кардани Enter input рақами воридшударо ба ёд орад. Чунон кунед, ки бо аз даст додани фокуси ба input дар консол массиви ҳамаи рақамҳое, ки пештар ба input ворид карда шудаанд, чоп шавад.