除非我在 VSCode 上使用 LiveServer 加载，否则网站 javascript 不起作用？答案

【问题标题】：Website javascript doesn't work unless I'm using LiveServer on VSCode to load it?除非我在 VSCode 上使用 LiveServer 加载，否则网站 javascript 不起作用？
【发布时间】：2021-05-24 07:31:19
【问题描述】：

导航栏切换不起作用？

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 时，由此创建的导航栏菜单可以完美运行，但是当我简单地将文件从 finder 打开到浏览器中时，导航栏不再工作？

这是必要的 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);
  }
}

我刚刚开始在 HTML 中实现 CSS 和 JavaScript，如果代码不是最好的，请见谅！还有很多工作要做！

【问题讨论】：

when I simply open the file from my finder into the browser 当你这样做时，你没有使用 HTTP 服务器 - 所以，很多功能根本无法工作 - 你需要一个 HTTP 服务器（软件）来托管一个网站
甜蜜！抱歉，我对 HTTP 和服务器了解不多，我将开始对此进行一些研究。如果我将我的网站更新为像 namecheap 这样的主机。那么javascript会正常工作吗？
不是 "http 和服务器" ... http 服务器 ... 像 apache、nginx、IIS、caddy - 当然，还有更简单的两个可以工作 - 是的，它会工作- 因为它使用 liveserver - 这只是一个“http 服务器”
大声笑我明白了，我的学习路径应该是进入实际托管网站以及我认为接下来应该教给我的所有内容。太感谢了！如果您可以将您的评论作为对整个主题的回答，我可以将其标记为正确

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

ooF 非常感谢！效果很好！
我会在几分钟内接受答案，stackoverflow 说我必须等待 5 分钟