Javascript .toggle only works 1.5 times-CodePudding

I'm trying to make an image popup using the .toggle function in javascript however it only works 1.5 times.

I can click it and it opens it, click the background to close it, open it again but then i cannot close it.

Here is the codepen with everything needed, any guidance would be great so thanks in advance. (im pretty new to js https://codepen.io/user843/pen/gOXobZZ

function prodImgPopup(a) {
popUpModal = document.querySelector(".prodimgpop")
popupImgID = document.getElementById("popID")
popUpModal.classList.toggle("product-popup-show")
popupImgID.src = a.src
popUpModal.addEventListener("click", e => {
    popUpModal.classList.toggle("product-popup-show")
})

CodePudding user response：

every time you click the image you add the event listener ... therefore, when you've clicked the image twice, it has the event listener running twice ... which means it does toggle twice

Of course toggling twice === do nothing

Change your code to

const popUpModal = document.querySelector(".prodimgpop")
const popupImgID = document.getElementById("popID")
popUpModal.addEventListener("click", e => {
  popUpModal.classList.remove("product-popup-show")
});
function prodImgPopup(a) {
    popupImgID.src = a.src
    popUpModal.classList.add("product-popup-show")
}

edit: not sure why every second time you load that page you get that prodImgPopup is undefined

anyway - here's an alternative

const popUpModal = document.querySelector(".prodimgpop");
const popupImgID = document.getElementById("popID");
popUpModal.addEventListener("click", (e) => {
  popUpModal.classList.remove("product-popup-show");
});
document.querySelectorAll("img[loading=lazy]").forEach((img) =>
  img.addEventListener("click", (prodImgPopup) => {
    popupImgID.src = img.src;
    popUpModal.classList.add("product-popup-show");
  })
);

and remove the onclick= from those <img loading="lazy" ...> images

You also need CSS change to fix the latent image

.prodimgpop {
  display: none;
}
.prodimgpop.product-popup-show {
  display: block;
}

Here's the code all fixed up and running

const popUpModal = document.querySelector(".prodimgpop");
const popupImgID = document.getElementById("popID");
popUpModal.addEventListener("click", (e) => {
  popUpModal.classList.remove("product-popup-show");
});
function prodImgPopup(a) {
  popupImgID.src = this.src;
  popUpModal.classList.add("product-popup-show");
}
document.querySelectorAll("img[loading=lazy]").forEach((img) =>
  img.addEventListener("click", (prodImgPopup) => {
    popupImgID.src = img.src;
    popUpModal.classList.add("product-popup-show");
  })
);

.product-popup {
    display: none;
}
.product-popup-show {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100000;
    background-color: rgba(32,32,32, .8);
    position: fixed;
}
.popup-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem;
}
.popup-img .img {
    width: 100%;
    max-width: 750px;
    object-fit: cover;
}
/* fix popup display */
.prodimgpop {
  display: none;
}
.prodimgpop.product-popup-show {
  display: block;
}

<div >
  <img loading="lazy" src="https://images.unsplash.com/photo-1602471615287-d733c59b79c4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"  alt="">
  <img loading="lazy" src="https://images.unsplash.com/photo-1533689476487-034f57831a58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"  alt="">
</div>

<div id="productPop" >
  <div >
    <img id="popID" >
  </div>
</div>

CodePudding user response：

As mentioned by Jaromanda, the event listener is being added each time you click. Try changing the Javascript to this.

function prodImgPopup(a) {
    popUpModal = document.querySelector(".prodimgpop")
    popupImgID = document.getElementById("popID")
    popUpModal.classList.toggle("product-popup-show")
    popupImgID.src = a.src
}

const popupdisplay = document.querySelector("#productPop");
popupdisplay.addEventListener("click", e => {
        popUpModal.classList.toggle("product-popup-show")
    });