Question

我意识到这个问题可能已经回答了，但是我无法解决它。请记住，这在WordPress之外还可以。

页面加载时出现此错误：（index）：54 Uncaught TypeError：无法读取（index）：54处为null的属性'addEventListener'。

点击隐私权政策时，我收到此错误消息：   （索引）：50未捕获的TypeError：无法读取null的属性'classList'       在togglePopup（（索引）：50）       在HTMLDivElement.onclick（（index :: 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');

};

我通过如下的functions.php文件在WordPress中包含了JavaScript：

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);
});

无法获得onclick事件以在WordPress中工作

1 个答案: