Editácia v skupine prvkov v JavaScripte

Teraz máme nie jeden odstavec, ale veľa:

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

Urobme tak, aby po kliknutí na akýkoľvek odstavec sa v ňom objavilo vstupné pole na editáciu.

V skutočnosti táto úloha pre nás nepredstavuje žiadnu zložitosť, pretože takmer celý kód sme získali v predchádzajúcej lekcii.

Na vyriešenie našej úlohy jednoducho spustíme cyklus cez odseky a v cykle použijeme kód z predchádzajúcej lekcie (tento kód ani nebude potrebné meniť):

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

Daný je tag ul. Urobte tak, aby po kliknutí na akúkoľvek li sa v nej objavilo vstupné pole, pomocou ktorého bude možné upraviť text tejto li.

Daná je HTML tabuľka. Urobte tak, aby po kliknutí na akúkoľvek bunku sa v nej objavilo vstupné pole na editáciu textu tejto bunky.