Խմբային տարրերի խմբագրում JavaScript-ում

Ենթադրենք, այժմ մենք ունենք ոչ թե մեկ, այլ բազմաթիվ պարբերություններ.

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

Եկեք կատարենք, որ ցանկացած պարբերության վրա կտտացնելիս դրանում հայտնվի խմբագրման input դաշտ։

Իրականում, նման խնդիրը մեզ համար դժվարություն չի ներկայացնում, քանի որ գրեթե ամբողջ կոդը մենք ստացել ենք նախորդ դասում։

Մեր խնդիրը լուծելու համար պարզապես ցիկլ կգործարկենք պարբերությունների վրա և ցիկլում կօգտագործենք նախորդ դասի կոդը (այս կոդը նույնիսկ կարիք չունի փոփոխելու).

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

Տրված է ul թեգը։ Կատարեք, որ ցանկացած li-ի վրա կտտացնելիս դրանում հայտնվի input դաշտ, որի օգնությամբ հնարավոր կլինի խմբագրել այդ li-ի տեքստը։

Տրված է HTML աղյուսակ։ Կատարեք, որ ցանկացած բջիջի վրա կտտացնելիս դրանում հայտնվի input դաշտ այդ բջիջի տեքստը խմբագրելու համար։