Elementide grupi redigeerimine JavaScriptis

Olgu meil nüüd mitte üks lõik, vaid palju:

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

Teeme nii, et klõpsates mis tahes lõigul, ilmub sinna sisendväli redigeerimiseks.

Tegelikult ei ole selline ülesanne meie jaoks raske, kuna peaaegu kogu kood saadi eelmises õppetükis.

Meie ülesande lahendamiseks lihtsalt käivitame tsükli lõikude üle ja kasutame tsüklis eelmise õppetüki koodi (seda koodi pole vaja isegi muuta):

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

Antud on silt ul. Tehke nii, et klõpsates mis tahes li peale, ilmub sinna sisendväli, mille abil saab redigeerida selle li teksti.

Antud on HTML tabel. Tehke nii, et klõpsakes mis tahes lahtril, ilmub sinna sisendväli selle lahtri teksti redigeerimiseks.