Redagavimas elementų grupėje su JavaScript

Tarkime, kad dabar turime ne vieną pastraipą, o daug:

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

Padarykime taip, kad paspaudus bet kurią pastraipą joje atsirastų įvesties laukas redagavimui.

Tiesą sakant, ši užduotis mums nėra sudėtinga, nes beveik visas kodas buvo gautas mums ankstesnėje pamokoje.

Norėdami išspręsti mūsų užduotį, tiesiog paleiskime ciklą per pastraipas ir cikle naudokime kodą iš ankstesnės pamokos (šio kodo net nereikės keisti):

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

Duotas tagas ul. Padarykite taip, kad paspaudus bet kurią li joje atsirastų įvesties laukas, kuriuo galėtumėte redaguoti tos li tekstą.

Duota HTML lentelė. Padarykite taip, kad paspaudus bet kurią langelį joje atsirastų įvesties laukas tos langelio teksto redagavimui.