JavaScript-এ লুপে ইভেন্ট হ্যান্ডলার যোগ করা

এখন চলুন শিখি কিভাবে ব্যাপকভাবে উপাদানগুলিতে ইভেন্ট হ্যান্ডলার যোগ করতে হয়। উদাহরণস্বরূপ, ধরা যাক আমাদের কাছে কিছু অনুচ্ছেদ আছে:

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

ধরা যাক আমাদের একটি ফাংশনও আছে:

function func() {
	console.log('!');
}

চলুন আমাদের অনুচ্ছেদগুলিকে একটি লুপে পার করি এবং প্রতিটি অনুচ্ছেদে ক্লিক হ্যান্ডলার হিসেবে func ফাংশনটি যোগ করি:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

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

এক্ষেত্রে this অবজেক্টটি আমাদের সাহায্য করবে - যখন ইভেন্ট ঘটার মুহূর্তে ফাংশনটি কল করা হয়, এই অবজেক্টটি সেই উপাদানটিকে নির্দেশ করবে যেখানে এই ইভেন্টটি ঘটেছে। উপরে বলা অনুযায়ী আমাদের func ফাংশনের কোডটি পরিবর্তন করি:

function func() {
	console.log(this.textContent); // অনুচ্ছেদের টেক্সট প্রদর্শন করি
}

নিম্নলিখিত ফাংশনটি দেওয়া আছে:

function func() {
	this.value = Number(this.value) + 1;
}

ইনপুটগুলিও দেওয়া আছে। এমন করো যাতে আমাদের যেকোনো ইনপুটে ফোকাস হারানোর সময় উপরের ফাংশনটি executed হয়।

সংখ্যা সহ কিছু অনুচ্ছেদ দেওয়া আছে। এমন করো যাতে যেকোনো অনুচ্ছেদে ক্লিক করলে সেখানের সংখ্যাটি বর্গ করা হয়।