JavaScriptda guruh elementlarini tahrirlash

Endi bizda bitta emas, balki ko'p abzatslar bor deb faraz qilaylik:

<p>matn1</p>
<p>matn2</p>
<p>matn3</p>

Keling, har qanday abzats ustiga bosilganda unga tahrirlash uchun input paydo bo'lishini ta'minlaylik.

Aslida bu vazifa biz uchun qiyin emas, chunki deyarli barcha kod oldingi darsda olingan edi.

Vazifamizni hal qilish uchun shunchaki abzatslar bo'yicha aylanishni boshlang va aylanishda oldingi dars kodidan foydalaning (bu kodni o'zgartirish ham shart emas):

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 tegi berilgan. Har qanday li ustiga bosilganda unda input paydo bo'lishini ta'minlang, uning yordamida ushbu li ning matnini tahrirlash mumkin bo'lsin.

HTML jadvali berilgan. Har qanday katakcha ustiga bosilganda unda shu katakcha matnini tahrirlash uchun input paydo bo'lishini ta'minlang.