声明“const”在 JavaScript 中不起作用

Question

当我尝试编写 JavaScript 程序来创建响应式导航菜单时，收到我无法理解的错误消息。

当我在括号中编写代码时，出现错误 “需要一个标识符，但看到的是‘const’。

当我检查网页并锁定控制台时，错误是：

menu.js：4未捕获类型错误：无法读取未定义的属性（读取“addEventListener”）在menu.js：4：14

我在下面附上了我的所有代码。然而，问题似乎出在 JavaScript 代码上，所以我会先附上它，因为我相信它是最重要的。

JavaScript代码：

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList('active')
})

CSS代码：

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
}

.logo {
    font-size: 1.5rem;
    margin: .5rem;
}

.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    text-decoration: none;
    color: white;
    padding: 1rem;
    display: block;
}

.navbar-links li:hover {
    background-color: #555;
}

/*STYLES HAMBURGER ICON*/
.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

/*MOBILE VIEW*/
@media (max-width: 600px) {
    .toggle-button {
        display: flex;
    }
    
    .navbar-links {
        
        display: none;
        width:100%;
}
    
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }
    
    .navbar-links li {
        text-align: center;
    }
    
    .navbar-links li a {
       padding: .5rem 1rem;
    }
    
     .navbar-links.active {
        display: flex;
    }
}

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Responsive Navigation Bar</title>
    <!--RESET-->
    <link rel="stylesheet" href="css/reset.css">

    <!--SITE STYLES-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/menu.js"></script>

</head>

<body>
    <nav class="navbar">
        <div class="logo">Company Name</div>
        <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navbar-links">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</body>

</html>

应该发生的是，在移动视图中，当单击汉堡包图标时，它应该弹出打开并显示链接“主页”、“关于”、“服务”、“联系方式”，当再次单击它时，它应该消失。

我尝试在每个语句末尾插入分号，但这也不起作用。

HTML 和 CSS 一切正常。当我切换到移动视图时，导航栏消失并变成汉堡包图标，正如它应该的那样。不起作用的是在移动视图中单击它，然后它会弹出。 JavaScript 不起作用。

Answer 1

您应该使用

classList('active')

来正确添加类，而不是使用

classList.add('active')

。这是更正后的 JavaScript 代码：

const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.add('active');
});

通过此更改，当您单击移动视图中的汉堡包图标时，导航链接应该变得可见。

Answer 2

您的代码中存在一些问题。

首先，由于您在 HTML 之前加载 JS，因此您的 JS 代码不会在 HTML 中找到任何元素。要解决此问题，您需要将 JS 代码放入 DOMContentLoaded

 回调中，或者简单地将 JS 导入代码放在正文的末尾。

其次，

classList

不是一个函数，所以如果你想在单击按钮时切换类，你需要按如下方式更新它：

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active');
});

声明“const”在 JavaScript 中不起作用

问题描述投票：0回答：2

2个回答

最新问题

声明“const”在 JavaScript 中不起作用

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2