网站javascript不起作用，除非我在VSCode上使用LiveServer来加载它？

Question

导航栏切换不工作？

Javascript：

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})

HTML

<div class="navbar">
<div class="brand-title">
<h1>LIST CONVERT</h1>
</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 class="selected"><a href="#">SQL List</a></li>
<li><a href="add-zeroes-or-characters-to-list.html">Expand Item Size</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>

当我在VSCode上使用liveserver时，由它创建的导航栏菜单可以完美地工作，然而，当我简单地将文件从查找器打开到浏览器时，导航栏就不再工作了？

以下是必要的CSS：

.navbar {
display: flex;
color: var(--white);
justify-content: space-between;
background-color: var(--darkblue);
align-items: center;
}
.brand-title {
margin: 0.5em;
font-family: "Oswald", sans-serif;
text-transform: uppercase;
font-size: 1.6rem;
}
.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: 1.3rem;
display: block;
}
.navbar-links li:hover {
background-color: var(--primaryblue);
}
.navbar-links .selected {
background-color: var(--primaryblue);
}
.navbar-links .selected-light {
background-color: var(--lightblue);
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
top: 20px;
}
.navbar ul {
display: flex;
flex-direction: column;
width: 100%;
}
.navbar-links {
display: none;
text-align: center;
width: 100%;
}
.navbar-links.active {
display: flex;
}
.navbar-links .selected-light {
background-color: var(--darkblue);
}
}

我现在正在着手将CSS和JavaScript实现到HTML中，如果代码不是最好的，很抱歉！还有很多工作要做！

Answer 1

正如Jaromanda X所说，在不使用HTTP服务器的情况下打开文件时，有些事情不起作用。如果您在web浏览器上按F12打开开发人员工具，并在控制台上进行检查，您可能会看到一些错误。

如果你使用chrome，你可以安装一个像这样的扩展，它可以创建一个本地web服务器来测试这类东西。还有很多其他选项，比如VSCode。