WordPress主题中JS的addEventListener绑定失效问题求助

嘿，我看了你的代码，发现两个关键问题导致事件绑定没生效，咱们一个个来解决：

问题1：getElementsByClassName返回的是元素集合，不是单个元素 #

你用document.getElementsByClassName("header__menu_btn")拿到的是一个HTMLCollection（类数组的元素集合），直接在这个集合上调用addEventListener肯定没用——集合本身没有这个方法呀！你得从集合里取出具体的元素，比如第一个匹配的元素，加上[0]就行。

问题2：querySelector的选择器语法错了 #

你要选类名为header__sidenav的元素，querySelector里必须加.前缀（类选择器的规则），你现在写的header__sidenav会被当成标签名找，自然找不到目标元素，后续的样式修改和alert都没法触发。

修正后的完整代码 #

// 获取第一个菜单按钮元素
const headerMenuIcon = document.getElementsByClassName("header__menu_btn")[0];
// 修正类选择器，加上.前缀
const headerSideBar = document.querySelector(".header__sidenav");

// 先判断元素是否存在，避免DOM未加载完成导致的报错
if (headerMenuIcon && headerSideBar) {
    headerMenuIcon.addEventListener("click", function () {
        headerSideBar.style.width = "100%";
        alert("Hello world");
    });
}

额外优化：确保DOM加载完成后执行代码 #

虽然你说外部的alert能正常运行，但保险起见，最好把代码放在DOM加载完成的回调里，避免因为JS加载顺序问题导致元素还没渲染就执行代码的情况：

document.addEventListener('DOMContentLoaded', function() {
    const headerMenuIcon = document.getElementsByClassName("header__menu_btn")[0];
    const headerSideBar = document.querySelector(".header__sidenav");
    
    if (headerMenuIcon && headerSideBar) {
        headerMenuIcon.addEventListener("click", function () {
            headerSideBar.style.width = "100%";
            alert("Hello world");
        });
    }
});

这样修改后，点击菜单按钮应该就能正常触发事件啦！

内容的提问来源于stack exchange，提问作者aditya kumar