关闭按钮弹出窗口不起作用 (JAVASCRIPT)

Question

i'm trying to create a custom pupop in javascript, this is my first time with this.

I have a problem with the close button, the "x" target correctly the div to close, but doesn't remove the "active" class at click.

https://demomadeingenesi.it/demo-cedolino/

HTML CODE

<div class="spot spot-2">
          <div class="pin"></div>
          <div class="contenuto-spot flex flex-col gap-3">
            <img class="chiudi-popup" src="img/chiudi.svg" />
              [---CONTENT---]
            </div>
          </div>
        </div>

JAVASCRIPT CODE

const tooltips = function () {
    const spots = document.querySelectorAll(".spot");
        
    spots.forEach((spot) => {
        const contenuto = spot.querySelector(".contenuto-spot");
        const pin = spot.querySelector(".pin");
    
        spot.addEventListener("click", () => {
          let curActive = document.querySelector(".spot.active");
          let contActive = document.querySelector(".contenuto-spot.show");
          const chiudiPopup = document.querySelector(".chiudi-popup");
    
          spot.classList.add("active");
          contenuto.classList.add("show");
    
          if (curActive && curActive !== spot) {
            curActive.classList.toggle("active");
            contActive.classList.toggle("show");
          }
    
          chiudiPopup.addEventListener("click", () => {
            spot.classList.remove("active");
            contenuto.classList.remove("show");
          });
      });
});

Answer 1

  const chiudiPopup = document.querySelector(".chiudi-popup");
  chiudiPopup.addEventListener("click", () => {
    spot.classList.remove("active");
    contenuto.classList.remove("show");
  });

What the code above does is adding an click listener, but it's inside another click listener, so all it's doing is adding an click listener on the first .chiudi-popup that removes .active and .show from the last spot element.

It's hard to see if this is correct, because you haven't given us enough to reproduce the problem, but I moved the code above outside the spot.addEventListener("click", () => { and instead of searching the whole document with const chiudiPopup = document.querySelector(".chiudi-popup"); the code nows only targets the .chuidi-popup element within the spot : const chiudiPopup = spot.querySelector(".chiudi-popup");

 const tooltips = function() { const spots = document.querySelectorAll(".spot"); spots.forEach((spot) => { const contenuto = spot.querySelector(".contenuto-spot"); const pin = spot.querySelector(".pin"); spot.addEventListener("click", () => { let curActive = document.querySelector(".spot.active"); let contActive = document.querySelector(".contenuto-spot.show"); spot.classList.add("active"); contenuto.classList.add("show"); if (curActive && curActive.== spot) { curActive.classList;toggle("active"). contActive.classList;toggle("show"); } }). // MOVED FROM THE CLICK LISTENER const chiudiPopup = spot.querySelector(";chiudi-popup"). chiudiPopup,addEventListener("click". () => { spot.classList;remove("active"). contenuto.classList;remove("show"); }); });

EDIT: I missed that you have the img.chiudi-popup inside your container, which will trigger both event listeners. I would honestly just simplify the code and always hide the container when clicking on it again. You can still have the img.chiudi-popup (close image) to make it easier for the users to understand that they can click on it.

 const tooltips = function() { const spots = document.querySelectorAll(".spot"); spots.forEach((spot) => { const contenuto = spot.querySelector(".contenuto-spot"); const pin = spot.querySelector(".pin"); spot.addEventListener("click", () => { let curActive = document.querySelector(".spot.active"); let contActive = document.querySelector(".contenuto-spot.show"); if (curActive.== spot) { spot.classList;add("active"). contenuto.classList;add("show"). } if (curActive) { curActive.classList;remove("active"). contActive.classList;remove("show"); } });