How to pass dynamically created element that exists in a function to other separate functions in JavaScript?

Question

I've created a function that dynamically creates some elements, and I want to access those elements from other separate functions. From my understanding I have to pass those elements I've created to the other functions... but I don't understand how.

let lightBoxEnabled = document.querySelectorAll(".lightbox-gallery-element");

function createLightbox() {
    const lightboxContainer = document.createElement('div');
    lightboxContainer.classList.add('lightbox-container');
    lightboxContainer.classList.add('active');
    body.append(lightboxContainer);

    const lightboxImageWrapper = document.createElement('div');
    lightboxImageWrapper.classList.add('lightbox-image-wrapper');
    lightboxContainer.append(lightboxImageWrapper);

    const lightboxImg = document.createElement('img');
    lightboxImg.classList.add('lightbox-img');
    lightboxImageWrapper.append(lightboxImg);

}

lightBoxEnabled.forEach(image => {
    image.addEventListener('click', () => {
        createLightbox();
    });
});

function hideLightBox() {
    body.classList.remove('overflow-hidden');
}

lightboxContainer.addEventListener('click', (e) => {
    hideLightBox();
});

Put `lightboxContainer.addEventListener(...)` inside the `createLightbox()` function. — Barmar, Jun 28 '22 at 18:50
@Mada Why do you think the event listener cannot be installed inside the function that creates the element? — Bergi, Jun 28 '22 at 19:54
In that case you should use event delegation. See https://stackoverflow.com/questions/23508221/vanilla-javascript-event-delegation — Barmar, Jun 28 '22 at 20:04

How to pass dynamically created element that exists in a function to other separate functions in JavaScript?

0 Answers0