Szerkesztés elemcsoportban JavaScript segítségével

Tegyük fel, hogy most nem egy, hanem több bekezdésünk van:

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

Tegyük meg, hogy bármelyik bekezdésre kattintáskor egy szerkesztésre szolgáló input jelenjen meg benne.

Valójában ez a feladat nem jelent nehézséget számunkra, mivel szinte az összes kódot megkaptuk az előző leckében.

A feladat megoldásához egyszerűen futtassunk ciklust a bekezdéseken, és a ciklusban használjuk az előző lecke kódját (ezt a kódot még meg sem kell változtatni):

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

Adott a ul tag. Állítsa be úgy, hogy bármelyik li-re kattintáskor egy input jelenjen meg benne, amellyel szerkeszthető lesz az adott li szövege.

Adott egy HTML táblázat. Állítsa be úgy, hogy bármelyik cellára kattintáskor egy input jelenjen meg az adott cella szövegének szerkesztéséhez.