addEventListener - wyskakuje błąd

Question

Witam,

próbuję dodać klasę do zdarzenia kliknięcia. Plik js podpięty na końcu body, dodatkowo najpierw ładuje cały DOM. Nie wiem, dlaczego wyskakuje następujący bład: Uncaught TypeError: Cannot read property 'addEventListener' of undefined  at HTMLDocument.<anonymous> 

document.addEventListener("DOMContentLoaded", function(event) {

    console.log("DOM został wczytany");

    function showMenu() {
        document.querySelector(".menu")[0].classList.toggle("show");
        return false;
    }

    const element = document.querySelector('.menu-icon')[0];

    element.addEventListener("click", showMenu, false);

});

 

Answer 1

Jeżeli chcesz odwołać się do pierwszego element z wielu to musisz zastosować document.querySelectorAll().
Możesz też zrobić tak, jak napisałeś, ale wtedy nie używasz [0]. Używając document.querySelector() zawsze odwoła się do pierwszego elementu.