Why does `querySelector` only select the first element in the `.weekdays` class?

querySelector Selects Only the First Element

In your code, you're using querySelector to retrieve the elements within the .weekdays class. However, this method only selects the first element that matches the specified selector. As you have multiple dates with the same class, it's capturing only the first "1" date.

How to Fix It: Use querySelectorAll

To select all the dates within the .weekdays class, you need to utilize querySelectorAll. This method returns a NodeList containing all the elements that match the given selector. Here's how to fix your code:

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

Explanation:

This code:

1. Calls querySelectorAll to select all elements with the .weekdays class, and stores them in a NodeList.
2. Iterates over each element in the NodeList using forEach.
3. For each element, adds a click event listener that displays the modal when clicked.

By using querySelectorAll, you're selecting all the dates within the .weekdays class and attaching the event listener to each of them, ensuring that any date can trigger the modal display.

The above is the detailed content of Why does `querySelector` only select the first element in the `.weekdays` class?. For more information, please follow other related articles on the PHP Chinese website!