javascriptaddeventlistenernodelistqueryselectall

Why does querySelectAll return empty NodeList even though there should be three buttons?

I'm trying to add event listeners to all buttons in my program, but const buttons = document.querySelectorAll('.button'); returns an empty NodeList.

HTML:

    <div id="buttons" class="buttons">
        <button type="button" class="button" id="send">Send</button>
        <button type="button" class="button" id="delete">Delete</button>
        <button type="button" class="button" id="again">Again</button>
    </div>

JS:

const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
    button.addEventListener("click", function() {
        clickEvent(param);
    });
});

This is what I have and I have no idea why it isn't working. It should return a NodeList of the buttons but the list is empty.

Solution

  • You are running <script> before the <div id="buttons"> gets inserted into the document
    Use <script defer src="..."> or place script in the end of <body> to avoid that

    <script> console.log(document.quserySelectorAll('a')) // [] </script>
<a> This is A </a>
<script> console.log(document.quserySelectorAll('a')) // [<a>] </script>