Javascript 添加事件侦听器在wordpress主题环境内的js中不工作

我正试图在header.php文件中的一个

span

标记中添加

addEventListener

，但它不起作用，我不知道为什么。我试了好几次。我正在研究wordpress主题。我已成功导入该文件。当我把

alert（'helllo word）

放在addEvent listener外部时，它可以工作，但在addEvent listener内部，什么都不工作。请帮忙

这是我的密码 header.php

 <div class="header__menu">
    
<span class="header__menu_btn">
<svg class="header__menu_icon" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-filter-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M2 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>
<!-- <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg> -->
</div>
</nav>
</header>
<div class="header__sidenav">
    <div class="header__sidenav_content">
        <h1 >Hello From Drawer</h1>
    </div>
</div>

---

将

defer

添加到您的脚本标记：

我正在使用wordpress环境，它的导入方式如下：“wp\u enqueue\u脚本（'aditya'，get\u template\u directory\u uri（）。/assets/js/header.js'，array（'jquery'），'1.0.0'，true）`再添加一个参数

true

以确保在关闭

body

标记之前添加脚本：

wp\u enqueue\u脚本（'aditya'，get\u template\u directory\u uri（）。/assets/js/header.js'，array（'jquery'），'1.0.0'，true，true）仍然不工作添加
延迟
到您的脚本标签：
我在这里使用wordpress环境，它的导入方式类似于“wp\u enqueue\u脚本（'aditya'，get\u template\u directory\u uri（）。/assets/js/header.js'，array（'jquery'），'1.0.0'，true）`再添加一个参数
true
以确保在关闭
body
标记之前添加脚本：
wp\u enqueue\u脚本（'aditya'，get\u template\u directory\u uri（）。/assets/js/header.js'，array（'jquery'），'1.0.0'，true，true）仍然不工作
const headerMenuIcon = document.getElementsByClassName("header__menu_btn");
const headerSideBar = document.querySelector("header__sidenav");

headerMenuIcon.addEventListener("click", function () {
  headerSideBar.style.width = "100%";
  alert("Hello world");
});