Redigering i gruppe af elementer i JavaScript

Lad os nu antage, at vi ikke har ét afsnit, men mange:

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

Lad os gøre det sådan, at ved et klik på ethvert afsnit, vises en input til redigering i det.

Faktisk er en sådan opgave ikke vanskelig for os, da næsten al kode blev opnået af os i den forrige lektion.

For at løse vores opgave skal vi blot køre en løkke gennem afsnittene og i løkken bruge koden fra den forrige lektion (denne kode behøver ikke engang at blive ændret):

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

Givet tagget ul. Gør det sådan, at ved klik på enhver li, vises en input i den, som kan bruges til at redigere teksten i denne li.

Givet en HTML-tabel. Gør det sådan, at ved klik på enhver celle, vises en input til redigering af tekst i denne celle.