Editace ve skupině prvků v JavaScriptu

Nyní předpokládejme, že nemáme jeden odstavec, ale mnoho:

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

Udělejme to, aby po kliknutí na libovolný odstavec se v něm objevilo vstupní pole pro editaci.

Ve skutečnosti tento úkol pro nás nepředstavuje obtíž, protože téměř veškerý kód jsme získali v předchozí lekci.

Pro vyřešení našeho úkolu jednoduše spustíme cyklus přes odstavce a v cyklu použijeme kód předchozí lekce (tento kód ani nebude potřeba měnit):

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

Je dán tag ul. Udělejte to, aby po kliku na libovolnou li se v ní objevilo vstupní pole, pomocí kterého bude možné upravit text této li.

Je dána HTML tabulka. Udělejte to, aby po kliku na libovolnou buňku se v ní objevilo vstupní pole pro editaci textu této buňky.