Bewerking in een groep elementen in JavaScript

Stel dat we nu niet één paragraaf hebben, maar meerdere:

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

Laten we ervoor zorgen dat bij een klik op een willekeurige paragraaf er een invoerveld voor bewerking verschijnt.

Eigenlijk is deze taak niet moeilijk voor ons, omdat bijna alle code al door ons verkregen was in de vorige les.

Om onze taak op te lossen, starten we gewoon een lus door de paragrafen en gebruiken we de code van de vorige les in de lus (deze code hoeft niet eens aangepast te worden):

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

Gegeven is de tag ul. Zorg ervoor dat bij een klik op eender welke li er een invoerveld verschijnt, waarmee je de tekst van deze li kunt bewerken.

Gegeven is een HTML-tabel. Zorg ervoor dat bij een klik op eender welke cel er een invoerveld verschijnt voor het bewerken van de tekst van die cel.