რედაქტირება ელემენტების ჯგუფში JavaScript-ზე

ახლა დავუშვათ, რომ გვაქვს არა ერთი აბზაცი, არამედ ბევრი:

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

მოდით, გავაკეთოთ ისე, რომ ნებისმიერ აბზაცზე დაწკაპუნებით მასში გამოჩნდეს ინფუთი რედაქტირებისთვის.

სინამდვილეში, ასეთი ამოცანა ჩვენთვის სირთულეს არ �არმოადგენს, რადგან თითქმის მთელი კოდი ჩვენ მივიღეთ წინა გაკვეთილში.

ჩვენი ამოცანის გადასაჭრელად, უბრალოდ, გავუშვებთ ციკლს აბზაცებზე და ციკლში გამოვიყენებთ წინა გაკვეთილის კოდს (ამ კოდს არც კი დაგვჭირდება შეცვლა):

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-ზე დაწკაპუნებით მასში გამოჩნდეს ინფუთი, რომლის საშუალებითაც შესაძლებელი იქნება ამ li-ის ტექსტის რედაქტირება.

მოცემულია HTML ცხრილი. გახსენით ისე, რომ ნებისმიერ უჯრაზე დაწკაპუნებით მასში გამოჩნდეს ინფუთი ამ უჯრის ტექსტის რედაქტირებისთვის.