Не удается получить событие onclick для работы в WordPress

Question

Я понимаю, что на этот вопрос уже можно было ответить, но я просто не могу заставить его работать.Имейте в виду, что это прекрасно работает вне WordPress.

Я получаю эту ошибку при загрузке страницы: (index): 54 Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' из null в (index): 54.

И я получаю эту ошибку при нажатии на политику конфиденциальности: (индекс): 50 Uncaught TypeError: Невозможно прочитать свойство 'classList' из null в togglePopup ((index): 50) в HTMLDivElement.onclick((индекс): 477)

HTML:

<div class="popup-backdrop"></div>
 <div class="popup" onclick="togglePopup()">Privacy policy.

<span class="popuptext" id="myPopup">
    Popup text to show up.
  </span>
</div>

JS:

const popup = document.getElementById("myPopup");
const backdrop = document.querySelector('.popup-backdrop');

function togglePopup () {
  popup.classList.toggle('show');
  backdrop.classList.toggle('popup-opened');
};

backdrop.addEventListener('click', closePopup);

function closePopup () {
  popup.classList.toggle('show');
  backdrop.classList.toggle('popup-opened');

};

Я включил JavaScript в WordPress через файл functions.php, например:это:

wp_enqueue_script( 'main-js-file', get_template_directory_uri() . '/js/main.js'); 

Также работает другой JavaScript, который у меня там есть.

Любая помощь, пожалуйста?

Answer 1

Похоже, что прослушиватель событий пытается выполнить привязку до загрузки соответствующего объекта DOM.Одним из возможных решений этой проблемы является добавление прослушивателя событий после загрузки всех объектов.Попробуйте:

  document.onload()=function() {
   const popup = document.getElementById("myPopup");
   const backdrop = document.querySelector('.popup-backdrop');
   backdrop.addEventListener('click', closePopup);
  };

ИЛИ с jQuery

jQuery(document).ready(function(){
 const popup = document.getElementById("myPopup");
 const backdrop = document.querySelector('.popup-backdrop');
 backdrop.addEventListener('click', closePopup);
});