Redaktimi në grupin e elementeve në JavaScript

Le të themi tani që kemi jo një paragraf, por shumë:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Le të bëjmë që me klikim në çdo paragraf të shfaqet një input për redaktim.

Në fakt, një detyrë e tillë nuk paraqet vështirësi për ne, pasi pothuajse i gjithë kodi është marrë nga ne në mësimin e mëparshëm.

Për zgjidhjen e detyrës sonë thjesht do të ekzekutojmë një cikël përmes paragrafëve dhe në cikël do të përdorim kodin e mësimit të mëparshëm (ky kod nuk do të ketë nevojë as të modifikohet):

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

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = elem.textContent;
		
		elem.textContent = '';
		elem.appendChild(input);
		
		input.addEventListener('blur', function() {
			elem.textContent = this.value;
			elem.addEventListener('click', func);
		});
		
		elem.removeEventListener('click', func);
	});
}

Është dhënë tagu ul. Bëni që me klikim në çdo li të shfaqet një input, me të cilin mund të redaktohet teksti i asaj li.

Është dhënë një tabelë HTML. Bëni që me klikim në çdo qelizë të shfaqet një input për redaktimin e tekstit të asaj qelize.