Qrupda elementlerin redaktə edilməsi JavaScript-də

İndi tutaq ki, bir deyil, çoxlu abzas var:

<p>mətn1</p>
<p>mətn2</p>
<p>mətn3</p>

Gəlin elə edək ki, hər hansı bir abzasa klikləndikdə onun daxilinde redaktə üçün input görünsün.

Əslində belə bir vəzifə bizim üçün çətinlik yaratmır, çünki demək olar ki, bütün kod əvvəlki dərsdə əldə edilmişdi.

Vəzifəmizi həll etmək üçün sadəcə abzaslar üzrə dövrü işə salarıq və dövrdə əvvəlki dərsin kodundan istifadə edərik (bu kodu dəyişmək belə lazım gəlməyəcək):

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 teqi verilib. Elə edin ki, istənilən li üzərində klikləndikdə onun daxilinde input görünsün, onun vasitəsilə həmin li-nin mətnini redaktə etmək mümkün olsun.

HTML cədvəli verilib. Elə edin ki, istənilən xanaya klikləndikdə onun daxilinde həmin xananın mətnini redaktə etmək üçün input görünsün.