জাভাস্ক্রিপ্টে লুপে ইভেন্ট হ্যান্ডলার সংযুক্ত করা

পূর্ববর্তী পাঠে আমরা শিখেছি কিভাবে লুপে নতুন এলিমেন্ট তৈরি করতে হয়। এবার নতুন এলিমেন্ট তৈরি করার সময় ইভেন্ট হ্যান্ডলার সংযুক্ত করব।

ধরুন আমাদের আবার এমন একটি প্যারেন্ট ডিভ আছে:

<div id="parent"></div>

আসুন একটি লুপ চালাই যা আমাদের ডিভের শেষে 9টি নতুন প্যারাগ্রাফ যোগ করবে, তাদের উপর ক্লিক হ্যান্ডলার সংযুক্ত করে:

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let p = document.createElement('p');
	p.textContent = '!';
	
	// ক্লিক হ্যান্ডলার সংযুক্ত করা:
	p.addEventListener('click', function() {
		console.log(this.textContent);
	});
	
	parent.appendChild(p);
}

একটি ডিভ দেওয়া আছে। একটি লুপ চালান যা আমাদের ডিভে 5টি ইনপুট যোগ করবে। একটি প্যারাগ্রাফও দেওয়া আছে। নিশ্চিত করুন যেন প্রতিটি নতুন ইনপুট ফোকাস হারানোর সময় তার টেক্সট প্যারাগ্রাফে লিখে।