Giải quyết onclick không hoạt động cho nhiều link cùng hàm trong JavaScript

Khi gán onclick cho nhiều element, dùng querySelectorAll() và forEach() gán event listener thay vì attribute onclick trùng lặp.

Ví dụ

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xử lý nhiều element</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("Clicked: " + this.innerHTML);
            });
        });
    </script>
</body>
</html>

Cách chạy

Lưu index.html, mở Live Server, click vào các div.

Kết quả console

Clicked: www.example.com
Clicked: www.test.com

Ưu điểm: Tách HTML/JS, gán nhiều listener cho cùng element, dễ quản lý, tránh ghi đè.