0

I'm trying to write popup template that appears and closes by clicking open and close-buttons respectively. It works but only once. I suppose this is because of the remove () method, but i don't understand how I can handle it.

const buttonOpenCards = document.getElementById('open-cards');
const buttonOpenPiano = document.getElementById('open-piano');
const portfolioSection = document.getElementById('portfolio');

const cardsText = 'this text describes project Flash Cards'
const pianoText = 'this text describes project Virtual Piano'
const cardsHeader = 'Flashcards'
const pianoHeader = 'Virtual Piano'

function createTemplate (text, header) {
    return `<div class="window">
                <h2 id="pop-up-window-header">${header}</h2>
                <div id="pop-up-window-text-content">
                    <p class="window-text">You can see the project at the following link<a></a></p>
                    <p class="window-text">${text}</p>
                </div>
                <button class="close-window">Close</button>
            </div>`
}

buttonOpenCards.addEventListener('click', () => {
    portfolioSection.innerHTML += createTemplate(cardsText, cardsHeader);
    const closeButton = document.querySelector('.close-window');
    closeButton.addEventListener('click', () => {
        document.querySelector('.window').remove();
    })

})

buttonOpenPiano.addEventListener('click', () => {
    portfolioSection.innerHTML += createTemplate(pianoText, pianoHeader);
    const closeButton = document.querySelector('.close-window');
    closeButton.addEventListener('click', () => {
        document.querySelector('.window').remove();
    })
})
Larian
  • 3
  • 2
  • 1
    You haven't shared your html code so I cannot be certain but I assume the problem is that you add many items with the same id (e.g. open-cards or open-piano) which is a mistake. Ids must be unique in the dom. You could use the getElementsByClassName to select your elements. – Stavros Angelis Feb 02 '22 at 15:25
  • @Stavros Angelis, there can be only one opened popup window at the same time so ids remains unique. – Larian Feb 02 '22 at 15:31
  • is the element with the id open-cards in the DOM when your javascript code is loaded? If not and you add it afterwards(ie. after the const buttonOpenCards is defined) then the button is not defined and thus won't do anything. Try a console.log( buttonOpenCards); after you initialise the button to see if you get undefined. – Stavros Angelis Feb 02 '22 at 15:36
  • @Stavros Angelis this button is in the DOM – Larian Feb 02 '22 at 15:43
  • Unfortunately that's all I can think without a reproducible code example. – Stavros Angelis Feb 02 '22 at 16:49
  • If `buttonOpenCards` and `buttonOpenPiano` buttons are inside `portfolioSection`, then every time you use `portfolioSection.innerHTML +=` the click listeners for those buttons are lost. You'll have to recreate the click listeners for those buttons every time or append HTML a different way. See: https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list – JM-AGMS Feb 02 '22 at 20:52

0 Answers0