当某个类遇到问题时，如何让 EventListener 找到它？答案

【问题标题】：How do i get EventListener to find a certain class when it's having trouble?当某个类遇到问题时，如何让 EventListener 找到它？
【发布时间】：2022-10-14 05:32:04
【问题描述】：

我正在开发一个响应式导航栏，除了一个小的 javascript 点击甚至错误我进入我的子菜单之外，基本上已经完成了所有工作。

我浏览了我的索引、脚本和样式文件，但找不到在查找指定类时 EventListener 变空的具体原因。

我试图从中选择一个类的 HTML 代码：

<body>
    <nav>
        <div class="navbar">
            <i class='bx bx-menu'></i>
            <div class="logo"><a href="#">UJP</a></div>
            <div class="nav-links">
                <div class="sidebar-logo">
                    <span class="logo_name">UJP</span>
                    <i class='bx bx-x'></i>
                </div>
                <ul class="links">
                    <li><a href="#">HOME</a></li>
                    <li>
                        <a href="#">PHOTOS</a>
                        <i class='bx bxs-chevron-down arrow photos-arrow'></i>
                        <ul class="photos-sub-menu sub-menu">
                            <li><a href="#">Drop 1</a></li>
                            <li><a href="#">Drop 2</a></li>
                            <li><a href="#">Drop 3</a></li>
                            <li><a href="#">Drop 4</a></li>
                            <li class="more">
                                <a href="#">More</a>
                                <i class='bx bxs-chevron-right arrow more-arrow'></i>
                                <ul class="more-sub-menu sub-menu">
                                    <li><a href="#">Drop 1</a></li>
                                    <li><a href="#">Drop 2</a></li>
                                    <li><a href="#">Drop 3</a></li>
                                    <li><a href="#">Drop 4</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">BLOGS</a>
                        <i class='bx bxs-chevron-down arrow blogs-arrow'></i>
                        <ul class="blogs-sub-menu sub-menu">
                            <li><a href="#">Drop 1</a></li>
                            <li><a href="#">Drop 2</a></li>
                            <li><a href="#">Drop 3</a></li>
                            <li><a href="#">Drop 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">ABOUT US</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
            </div>
            <div class="search-box">
                <i class='bx bx-search-alt-2'></i>
                <div class="input-box">
                    <input type="text" placeholder="Search...">
                </div>
            </div>
        </div>
    </nav>
<script src="script.js"></script>
</body>

当我将以下代码应用于我的 script.js 时，我在控制台中收到错误：无法读取 null 的属性（正在读取 'addEventListener）

    // sidebar sub menu open close js code
let photosArrow = document.querySelector("photos-arrow");

window.onload=function(){
    photosArrow.addEventListener("click", ()=>{
        navLinks.classList.toggle("show1");
    });
}

在做了一些研究之后，我明白这可能是由于脚本在 DOM 完全加载之前运行。这就是为什么我添加了“window.onload=function()”但即使这样我仍然无法让它工作。任何帮助表示赞赏。再次感谢。

【问题讨论】：

这是.photos-arrow（你忘了点）。
您的 sn-p 中没有带有 photos-arrow 的 ID 或类名的元素。正如@Robo Robok 所说，您需要querySelector 中的. 或#。此外，您还没有在 JS 中定义一个名为 navLinks 的变量。不需要window.onload。

标签： javascript html css typeerror navbar

【解决方案1】：

机器人机器人是对的。打败我。 ".photos-arrow"

【讨论】：