জাভাস্ক্রিপ্টে গ্রুপ এলিমেন্ট এডিটিং

এখন ধরুন আমাদের কাছে একটি নয়, অনেকগুলি প্যারাগ্রাফ রয়েছে:

<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 টেবিল দেওয়া আছে। এমন করুন যাতে যেকোনো সেলে ক্লিক করলে সেখানে সেই সেলের টেক্সট এডিট করার জন্য একটি ইনপুট উপস্থিত হয়।