Javascript 无法使onclick事件在WordPress中工作

我意识到这个问题可能已经得到了回答，但我就是无法让它起作用。请记住，在WordPress之外，这种方法很有效

我在加载页面时遇到此错误：索引：54未捕获类型错误：无法读取索引：54处null的属性“addEventListener”

单击“隐私策略”时，我遇到此错误： 索引：50未捕获类型错误：无法读取null的属性“classList” 在切换时弹出索引：50 在htmldevelment.onclick索引处：477

HTML:

我通过functions.php文件将JavaScript包含在WordPress中，如下所示：

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

还有我在那里使用的其他JavaScript

---

有什么帮助吗？

似乎事件侦听器正在相关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);
});

---

您的js是否在dom呈现之前运行？您希望在javascript或jquery上实现这一点吗？这是有效的js吗？它抛出了未捕获的语法错误：意外的标记{。可能是因为我在同一个js文件中也使用了jQuery，比如：jQuerydocument.readyfunction{}，但我的普通js不在其中..jQuery不应该与此冲突。请检查{}的开始和结束顺序在您的is文件中，我认为这是一个问题。请查看您是否能在此处发现错误：也是在我删除窗口时。onload{const popup=document.getElementByIdmyPopup；const background=document.querySelector'.popup background'；background.addEventListener'click'，closePopup；}然后我的jQuery脚本又开始工作了。我刚刚发现，当我通过脚本标签在body之前加载javascript文件时，弹出窗口就工作了，所以这个wp_enque函数没有正常工作。奇怪的是，jQuery部分工作了

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

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