我尝试创建导航栏，但我的javascript代码没有'；行不通_Javascript_Addeventlistener

我尝试创建导航栏，但我的javascript代码没有'；行不通

javascript

我尝试创建导航栏，但我的javascript代码没有'；行不通,javascript,addeventlistener,Javascript,Addeventlistener,您好，我正在尝试创建一个导航栏，一切都进行得很顺利，但是当我在导航栏的响应度上工作时，我的addeventlistener函数不起作用：这是我的html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css

您好，我正在尝试创建一个导航栏，一切都进行得很顺利，但是当我在导航栏的响应度上工作时，我的addeventlistener函数不起作用：这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Nav</title>
</head>
<body>
    <nav class="navbar">
        <h4 class="logo">Nav</h4>
        <ul class="navlinks">
            <li>
                <a href="#" >Home</a>
            </li>
            <li>
                <a href="#" >Work</a>
            </li>
            <li>
                <a href="#" >About us</a>
            </li>
            <li>
                <a href="#" >Projects</a>
            </li>
        </ul>
        <div class="burger">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
    </nav>
</body>
</html>

下面是我的javascript代码：

const navSlide = () => {
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.navlinks')

    burger . addEventListener('click',()=>{
        nav.classList.toggle('nav-active')
    })
}

navSlide();

我对这个论坛很陌生，但我听说它是最受欢迎的一个论坛，我的代码行让我很生气。是的，再次感谢你回复我的帖子

很高兴看到你是新来的，并决定加入

不使用jQuery，您可以使用：

const导航幻灯片=（）=>{
const burger=document.querySelector（“.burger”）
const nav=document.querySelector（“.navlinks”）
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'nav-active'）
})
}
addEventListener（“DOMContentLoaded”，函数（事件）{
导航幻灯片（）；
});

基本上，此代码将等待页面加载（以便DOM中存在所有元素，这意味着

document.querySelector

将起作用），然后附加事件侦听器。这是避免浏览器渲染速度慢等问题的最佳做法，而无需依靠浏览器最后渲染脚本。

很高兴看到您是新加入的，并决定加入

不使用jQuery，您可以使用：

const导航幻灯片=（）=>{
const burger=document.querySelector（“.burger”）
const nav=document.querySelector（“.navlinks”）
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'nav-active'）
})
}
addEventListener（“DOMContentLoaded”，函数（事件）{
导航幻灯片（）；
});

基本上，此代码将等待页面加载（以便DOM中存在所有元素，这意味着

document.querySelector

将起作用），然后附加事件侦听器。这是避免浏览器呈现速度慢等问题的最佳实践，而不依赖浏览器最后呈现脚本。

您收到了什么错误？您在创建元素之前执行JavaScript。看起来您的JavaScript在创建html代码之前正在运行。尝试将您的

标记移动到正文底部，或者使用侦听器检查文档何时加载。您也可以使用

哦，这就是问题所在。再次感谢您回答此错误非常愚蠢，尽管您收到了什么错误？您在创建元素之前正在执行JavaScript。看起来像您的在创建html代码之前，javascript正在运行。尝试将您的

标记移动到正文的底部，或者使用侦听器检查文档何时加载。您也可以使用

哦，这就是问题所在。再次感谢您回答此错误，但这相当愚蠢

const navSlide = () => {
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.navlinks')

    burger . addEventListener('click',()=>{
        nav.classList.toggle('nav-active')
    })
}

navSlide();