Uncaught TypeError: Невозможно прочитать свойство 'parentElement' из неопределенного

Question

Я нашел много ответов на вопросы, похожих на мой вопрос, но все они, элементы на самом деле "не определены".В моем случае он существует.

Мой код работает как положено.В основном это добавление eventListener ко всем кнопкам модального освобождения, которые являются якорем.Функция закрытия состоит в том, чтобы найти самый внешний модальный div и присвоить ему «скрытый» класс, который устанавливает его отображение равным none.

Он корректно закрывает модальное окно, но после закрытия модального окна появляется эта ошибка.

const bookBTN =             document.getElementById('bookBTN');
const apptModalStart =      document.getElementById('appt-start');
const apptModalEnd =        document.getElementById('appt-end');
const apptStartContent =    apptModalStart.querySelector('.appt-content');
const apptEndContent =      apptModalEnd.querySelector('.appt-content');
const modalCloseBTNs =      document.querySelectorAll('.modal-dismiss');

for(let i = 0; i < modalCloseBTNs.length; i++) {
    modalCloseBTNs[i].addEventListener('click', function(e) {
        closeAppointmentWindow(modalCloseBTNs[i]);
    })
}

const closeAppointmentWindow = (btn) => {
    let parent = getClosestParentByClass(btn, "appt-modal");  // Line 52
    parent.classList.add('faded');
    if(parent === apptModalStart) showBTN(bookBTN);
    setTimeout(function() {
        parent.classList.add('hidden');
    }, 300);
}

const getClosestParentByClass = (e, parentClass) => {
    let parent = e.parentElement;  // Line 61
    if(e.parentElement.classList.contains(parentClass)) return parent;
    else return getClosestParentByClass(parent, parentClass);
}

assignments.js: 61 Uncaught TypeError: Невозможно прочитать свойство 'parentElement' из неопределенного

в getClosestParentByClass (assignments.js: 61)

вcloseAppointmentWindow (assignments.js: 52)

в HTMLDivElement.(assignments.js: 30)

Пожалуйста, дайте мне некоторое представление о том, почему он дает мне эту ошибку.

Исправления: у меня уже есть console.log (modalCloseBTNs), console.log (modalCloseBTNs [i]) в цикле, console.log (e) и console.log (btn) соответственно в каждой функции, и все они определены.За исключением btn и e, они показывают по 2 версии каждая, одна определяется как вторая, сразу после завершения функции (которая намекает на то, что она запускается 2 раза ??? по какой-то причине), которая не определена.

Answer 1

Вы собираетесь натолкнуться на элемент в цепочке без родителя, вы предполагаете, что он всегда будет иметь один

const getClosestParentByClass = (e, parentClass) => {
  let parent = e.parentElement;  // Line 61
  if(!parent) return null;
  else if(e.parentElement.classList.contains(parentClass)) return parent;
  else return getClosestParentByClass(parent, parentClass);
}

В конце вы заново изобретаете closest()

const elem = btn.closest(".appt-modal")