JavaScript-এ একই ফাংশনে একাধিক লিংকের onclick কাজ না করলে সমাধান

একই ক্লাস/সিলেক্টর 가진 একাধিক এলিমেন্টে `onclick` এট্রিবিউট কাজ না করলে, `document.querySelectorAll()` ব্যবহার করে সব এলিমেন্টে ইভেন্ট লিসেনার যোগ করা উচিত।

সমস্যা

<!-- এটা কাজ করবে না একাধিক 엘িমেন্টে -->
<div class="class1" onclick="myFunc()">Link 1</div>
<div class="class1" onclick="myFunc()">Link 2</div>

সমাধান: querySelectorAll + forEach

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Multiple Click Handlers</title>
</head>
<body>
    <div class="class1">www.example.com</div>
    <div class="class1">www.test.com</div>

    <script>
        const elements = document.querySelectorAll('.class1');
        
        elements.forEach(el => {
            el.addEventListener('click', function() {
                console.log("ক্লিক করা: " + this.innerHTML);
                // এখানে আপনার ফাংশন কল করুন
            });
        });
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি multiClick.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. দুই ডিভেই ক্লিক করে কনসোল দেখুন।

আউটপুট (কনসোল)

ক্লিক করা: www.example.com
ক্লিক করা: www.test.com

ইভেন্ট ডেলিগেশন (আরও ভালো)

document.body.addEventListener('click', e => {
    if (e.target.matches('.class1')) {
        console.log("ডেলিগেটেড ক্লিক: " + e.target.innerHTML);
    }
});

তুলনা

সতর্কতা

• `querySelectorAll` Static NodeList রিটার্ন করে (লাইভ নয়)।
• ডাইনামিক্যালি যোগ করা এলিমেন্টে আলাদা লিসেনার লাগবে (অথবা ডেলিগেশন)۔
• এরো ফাংশনে `this` কাজ করে না, regular function ব্যবহার করুন।