javascript - How can I identify the error of a template literals modal that isn't showing?

Question

Recently I got help from a very kind user from here about a template literal gallery with modals included.

The example I made was fixed and worked fine.

The thing is that when I passed the code to the actual project, the modals won't show. Modals are activated with a simple function classList.toggle(a class with display block).

Here I post some of the js code for better understanding

function galTemplate(oriGall){
    return `
    <div class="gallery-entry" id="${oriGall.imagen}-btn">
        <a href=""><img src="imgs/gallery/${oriGall.imagen}.jpg"></a>
        <p class="gallery-entry-titulo">${oriGall.titulo}</p>
    </div>
    `
}

function galModal(oriGall){
    return `
    <iframe class="popup-bg" id="${oriGall.imagen}-modal" src="imgs/gallery/${oriGall.titulo}/${oriGall.imagen}.html" frameborder="0""></iframe>
    `
}

function addClickListeners(oriGall) {
    let btnId = oriGall.imagen + '-btn';
    let modalId = oriGall.imagen + '-modal';
    let elBtn = document.getElementById(btnId);
    let elModal = document.getElementById(modalId);
    elBtn.onclick = function() {
      console.log('click: btn: ' + this.id + ', modal: ' + elModal.id);
      elModal.classList.toggle('show-popup');
    }
    /* to dispose the popup on click */
    elModal.onclick = function() {
      this.classList.toggle('show-popup');
    }
    /* --- */
  }

document.getElementById("origami-gallery-grid").innerHTML = `
  <div class="gallery-grid">
    ${ORIGAMI_GALLERY.map(galTemplate).join("")}
  </div>
  ${ORIGAMI_GALLERY.map(galModal).join("")}
`;
ORIGAMI_GALLERY.map(addClickListeners);

This works with an array that looks like this (but with more objects)

const ORIGAMI_GALLERY = [
    {
        imagen: "origami-gallery-img-001",
        titulo: "Rencito"
    },
    {
        imagen: "origami-gallery-img-002",
        titulo: "Taski"
    }
];

I really don't know where can the bug be located. In the example just worked fine with 0 problems. I thought it might be because I am using external HTML in iframes, but tested it in Codepen and had no problems. So I don't know what is going on. What is that thing that I am missing? Please help!

question from:https://stackoverflow.com/questions/66055568/how-can-i-identify-the-error-of-a-template-literals-modal-that-isnt-showing

Answer 1

Ok, it was a stupid error. I was using "a" tag to tag the modal button and that caused the page to reload. So I just changed it to div

function galTemplate(oriGall){
    return `
    <div class="gallery-entry" id="${oriGall.imagen}-btn">
        <div><img src="imgs/gallery/${oriGall.imagen}.jpg"></div>
        <p class="gallery-entry-titulo">${oriGall.titulo}</p>
    </div>
    `
}