Problem with Event Listener not working.

Hello! I'm having a problem with an event listener not being detected.
I've tried using "debugger; " to check through the developer tool what's happening, and I'm not really sure what I'm supposed to check specifically... Although I did check the event listener tab, and it isn't referencing anything from my code (as I have bootstraps, those are the only ones listed.) I also cannot really interact with the page, because the page I have has a buffer template, which prevents me from it. Because of this, I'm really stuck from debugging.

function customerCalendar(event) {    debugger;    calendarBody.addEventListener('click', function(event) {        console.log('Event listener added');        const target = event.target;        const appointmentIndicator = target.closest('.appointment-indicator');        if (appointmentIndicator) {            console.log('Click event triggered');            event.stopPropagation();            const parentCell = appointmentIndicator.parentElement;            const appointmentsAttr = parentCell.dataset.appointments;            console.log('Appointments attribute:', appointmentsAttr);            if (appointmentsAttr) {                try {                    const appointments = JSON.parse(appointmentsAttr);                    console.log('Appointments:', appointments);                    createPopupBox(appointments, appointmentIndicator); // Pass filteredAppointments as an argument                } catch (error) {                    console.error('Error parsing JSON:', error);                }            } else {                console.log('No appointments found');            }        } else {            console.log("At least the function worked.");            const dateAttr = target.dataset.date;            if (dateAttr) {                const date = new Date(dateAttr);                const year = date.getFullYear();                const month = date.getMonth() + 1;                const day = date.getDate();                openPopup(event, year, month, day);            }        }    });    // Close the popup box when clicking outside of it    document.removeEventListener('click', function(event) {        if (openPopupBox && !event.target.closest('.popup-box')) {            closePopupBox(event);        }    }); }

Welcome to CodeRanch!

The big strange thing that jumps out at me is that you're calling document.removeEventListener(), but instead of passing it a reference to an existing event handler, you are supplying it a new one using an anonymous function definition. Did you actually intend to call document.addEventListener() instead?

Because of this, it's hard for me to tell whether your problem is that the event listener that you add to calendarBody isn't working, or whether the problem is that the event listener that you're removing from document isn't working.

In the case that event handler that you're adding to calendarBody isn't working, doesn't it log anything to the console when you click the calendar body?

Note that your log message is misleading. It reads "Event listener added", but it won't actually be logged when you add the event listener. Instead, it will only be logged after you click the calendar body.

Please clarify the following:

What exactly did you expect to happen that isn't working?

Does your application log anything to console when you click the calendar body?

Did you intend to use removeEventListener() instead of addEventListener()?

Please share the relevant (and only the relevant) part of the HTML with us.

Could it be that another element is capturing events intended for the calendar body?

You can use the toggle method on classlist to on / off a class on an element in js.

Example.
const button = document.querySelector("button")


button.addEventListener("click", () => {
   button.classList.toggle("switchModalBox")
})