แก้ปัญหา onclick ไม่ทำงานกับหลายลิงก์เรียกฟังก์ชันเดียวกัน

ใช้ document.querySelectorAll() เลือกทุก Element แล้ววนเพิ่ม Event Listener

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="class1">www.example.com</div>
    <div class="class1">www.test.com</div>

    <script>
        const values = document.querySelectorAll('[class=class1]');
        values.forEach(function(v) {
            console.log(v.innerHTML);
        });
    </script>
</body>
</html>

วิธีรันโปรแกรม

1. บันทึกไฟล์ชื่อ "anyName.html" หรือ "index.html"
2. คลิกขวาที่ไฟล์ เลือก "Open with Live Server" ใน VS Code Editor

ผลลัพธ์

แสดง innerHTML ของทุก div class="class1" ใน Console