Urejanje v skupini elementov v JavaScriptu

Recimo, da imamo zdaj ne en odstavek, ampak veliko:

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

Naredimo tako, da ob kliku na kateri koli odstavek v njem prikaže vnosno polje za urejanje.

Pravzaprav ta naloga za nas ne predstavlja težav, saj smo skoraj vso kodo pridobili v prejšnji lekciji.

Za rešitev našega problema preprosto zaženimo zanko skozi odstavke in v zanki uporabimo kodo prejšnje lekcije (te kode niti ni treba spreminjati):

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

Podan je tag ul. Naredite tako, da ob kliku na katero koli li v njej prikaže vnosno polje, s katerim je mogoče urediti besedilo te li.

Podana je HTML tabela. Naredite tako, da ob kliku na katero koli celico v njej prikaže vnosno polje za urejanje besedila te celice.