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

Question

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

261 views Asked by mauri At 04 May 2023 at 10:39

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.

Original Q&A

There are 2 answers

Klone On 04 May 2023 at 10:46

You are using #button as the selector in document.querySelectorAll(), but your buttons have ids of send, delete, and again. The # selector is used to select elements with a specific id attribute, not elements with a specific class or tag name, so use the class button instead (. is for classes)

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

**Dimava** · Accepted Answer · 2023-05-04T12:08:18+00:00

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>

TechQA.

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

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in ADDEVENTLISTENER

Related Questions in NODELIST

Related Questions in QUERYSELECTALL

Popular Questions

Popular Tags

Trending Questions