Redigering i grupp av element i JavaScript

Antag nu att vi inte har ett stycke, utan många:

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

Låt oss göra så att när man klickar på vilket stycke som helst visas en inmatningsruta för redigering i det.

Egentligen är denna uppgift inte svår för oss, eftersom nästan all kod erhölls av oss i föregående lektion.

För att lösa vår uppgift kommer vi helt enkelt att köra en loop genom styckena och använda koden från föregående lektion i loopen (denna kod behöver inte ens ändras):

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

Given taggen ul. Gör så att när man klickar på vilken li som helst dyker en inmatningsruta upp i den, som kan användas för att redigera texten i denna li.

Given en HTML-tabell. Gör så att när man klickar på vilken cell som helst dyker en inmatningsruta upp för att redigera texten i den cellen.