I currently work on a school project with JS and I need to etablish a modal and a lightbox in the same page.
I work with classes and when I initialize my Lightbox and Modal classes, only one of them works.
That is, the methods called when initializing my classes work but the bindEvents method containing my addEventListener doesn’t work.
Here are more details :
My Controller class
class Controller {
init = () => {
...
Modal.init()
Lightbox.init()
}
}
My Modal class
class Modal {
init = () => {
// ...
this.bindEvents()
}
bindEvents = () => {
const openBtn = document.querySelector('.modal-btn')
// ...
openBtn.addEventListener('click', this.open)
// ...
}
open = () => {
// Open modal function
}
}
export default new Modal()
My Lightbox class
class Lightbox {
init = () => {
// ...
this.bindEvents()
}
bindEvents = () => {
const openBtn = document.querySelector('.lightbox-btn')
// ...
openBtn.addEventListener('click', this.open)
// ...
}
open = () => {
// Open lightbox function
}
}
export default new Lightbox()
The only class whose events work is the last to be called, so Lightbox in this example.
I also want to clarify that I work with native JavaScript and that each of my two classes work, the problem remains with the events of the first class called which do not work.
Thanks for taking a look, I think I’ve tried almost everything!
