Uređivanje u grupi elemenata na JavaScript-u

Pretpostavimo sada da imamo ne jedan, već mnogo pasusa:

<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>

Hajde da napravimo da se klikom na bilo koji pasus u njemu pojavi input za uređivanje.

Zapravo, ovakav zadatak za nas ne predstavlja komplikaciju, pošto je skoro ceo kod već dobijen u prethodnoj lekciji.

Za rešavanje našeg zadatka jednostavno ćemo pokrenuti petlju kroz pasuse i u petlji koristiti kod iz prethodne lekcije (ovaj kod čak i ne moramo menjati):

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);
	});
}

Dat je tag ul. Napravite tako da klikom na bilo koju li u njoj se pojavi input, pomoću kog ćete moći da uredite tekst te li.

Data je HTML tabela. Napravite tako da se klikom na bilo koju ćeliju u njoj pojavi input za uređivanje teksta te ćelije.