Why Does Queryselector Only Select The First Element And How Can I Fix This?

I am trying to make a calendar where when I click on one of the dates, a form pops up that you have to fill in. I cannot get this to work correctly. The only one I can get to work

Solution 1:

Use querySelectorAll instead which would return you a list of node. You then have to iterate over then and attach the event handlers.

document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",
 () => {
    document.querySelector(".bg-modal").style.display = "flex";
  }));

Solution 2:

if you want to acces all Class you have to use the querySelectorAll. It's the right way to use class and Javascript like in the doc : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll After this you just have to use a forin to parse it.

Solution 3:

Use querySelectorAll and forEach:

document.querySelectorAll('.weekdays').forEach(e => e.addEventListener('click', listener)):

querySelector just returns the first element match, querySelectorAll returns all elements that match.

Solution 4:

Because querySelector():

returns the first Element within the document that matches the specified selector, or group of selectors.

If you want to get multiple nodes use querySelectorAll(). It returns a NodeList (it can be iterated just like a normal array).