CloseButton is null в модальном окне прикрученном к плагину Wordpress?

Question

[Анита Ковалева]

Прошу сильно не ругаться) Есть плагин, моделирующий карту регионов России, при нажатии на красный mark вылезает popup, который стилизован под box с описанием mark на который был произведен клик. Причем сам бокс стилизуется на ура, хочу сделать из него красивую галерею с описанием партнера и его фотогалереей. Но вот при попытке прикрутить к модальному окну кнопку закрытия - в консоли пишет closeButton is null.

var modal = document.querySelector(".company-box");
  var closeButton = document.getElementById("#close-button");

      closeButton.addEventListener("click", function(){
        modal.classList.toggle("close");
      });

Каким способом можно отладить код? Такое чувство, что он не может найти элемент по ID, потому что ссылка a id close-button добавленная через плагин появляется после того как скрипт уже запущен.

Answer 1

[Борис Черепанов]

var closeButton = document.getElementById("#close-button");
Нужно убрать #
var closeButton = document.getElementById("close-button");

Comments

[Анита Ковалева]

Уже пробовала, тоже самое. Вне зависимости как я пытаюсь взять элемент из DOM, будь то querySelector\getElementByID.

[Борис Черепанов]

Анита Ковалева, Тогда такой вопрос: вы объявляете скрипт когда уже открылось модальное окно?
Возможно окно подгружается, например, по ajax и его просто не существует в тот момент когда вы объявляете ваш скрипт.

[Анита Ковалева]

Борис Черепанов, Подключила файл script.js через functions.php в wordpress перед тэгом body. В этом файле у меня лежит скрипт. Если это так, как вы описали есть выход из этой ситуации? Скорее всего popup появляется именно по ajax, хотя тогда не понимаю почему в консоли нет ошибки по поводу идентификации content-box, почему-то его он находит в дом дереве.

[Борис Черепанов]

AJAX'су куда-то нужно положить загруженные данные. Наверно content-box для этого и служит.

Есть два пути, которые я вижу.
1. Через jquery.
Вы вешаете обработчик событий на кнопку, которая вызывает модальное окно. Там подписываетесь на .ajaxStop и в нём ищите уже кнопку
2. Через MutationObserver
Также вешаете обработчик на кнопку вызова модалки, только уже через js
Вешаете observer на content-box и проверяете изменение потомков. Если closeBotton не null и не undefined то объявляете свой скрипт обработки закрытия и отписываетесь от observer'а
Справка по нему https://developer.mozilla.org/ru/docs/Web/API/Muta...

[Анита Ковалева]

Борис Черепанов, спасибо, сейчас попробую