Elementtiryhmän muokkaus JavaScriptillä

Oletetaan nyt, että meillä ei ole yhtä kappaletta, vaan useita:

<p>teksti1</p>
<p>teksti2</p>
<p>teksti3</p>

Tehdään niin, että minkä tahansa kappaleen napsauttamalla siinä näkyy syöttökenttä muokkausta varten.

Itse asiassa tämä tehtävä ei ole meille vaikea, sillä lähes kaikki koodi saatiin edellisessä oppitunnissa.

Ongelman ratkaisemiseksi suoritetaan vain silmukka kappaleiden yli ja käytetään silmukassa edellisen oppitunnin koodia (tätä koodia ei tarvitse edes muuttaa):

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

Annettu ul -tag. Tee niin, että minkä tahansa li:n napsauttamalla siinä näkyy syöttökenttä, jolla voidaan muokata tämän li:n tekstiä.

Annettu HTML-taulukko. Tee niin, että minkä tahansa solun napsauttamalla siinä näkyy syöttökenttä kyseisen solun tekstin muokkaamiseksi.