Redigering i gruppe av elementer i JavaScript

La oss nå si at vi ikke har ett avsnitt, men mange:

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

La oss gjøre det slik at ved et klikk på et hvilket som helst avsnitt dukker det opp en input for redigering i det.

Egentlig representerer ikke en slik oppgave noen vanskelighet for oss, siden nesten all koden ble oppnådd av oss i forrige leksjon.

For å løse oppgaven vår, kjører vi ganske enkelt en løkke gjennom avsnittene og i løkken bruker vi koden fra forrige leksjon (denne koden trenger vi ikke engang å endre):

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

Det er gitt en ul-tag. Gjør slik at ved klikk på en hvilken som helst li dukker det opp en input i den, som kan brukes til å redigere teksten i denne li.

Det er gitt en HTML-tabell. Gjør slik at ved klikk på en hvilken som helst celle dukker det opp en input for redigering av teksten i den cellen.