时间戳

首页 > 解决方案 > 未捕获的类型错误：当我尝试在 chrome 中运行我的代码时，无法读取 null 的属性“addEventListener”

javascript - 未捕获的类型错误：当我尝试在 chrome 中运行我的代码时，无法读取 null 的属性“addEventListener”

问题描述

因此，当我尝试在浏览器中运行我的 html 文件时，chrome 会记录该错误，但在 Visual Studio 代码中它不会记录任何问题。我该如何解决这个问题并确保它不会在未来发生？我的js代码：

const navbarBtn = document.querySelector("navbar__btn");
const navbarLinks = document.querySelector("navbar__links");
navbarBtn.addEventListener("click", function () {
  let value = navbarLinks.classList.contains("navbar__collapse");

  if (value) {
    navbarLinks.classList.remove("navbar__collapse");
  } else {
    navbarLinks.classList.add("navbar__collapse");
  }
});

标签： javascripthtmlcss

解决方案

您的代码有两件事可能有问题。

在 html 准备好之前执行的脚本

您需要确保在加载所需的 html 后加载您的 JS。没有详细说明，两种好方法是：

在 html 文件的底部加载脚本

    <script src="main.js"></script>
</body>

defer在你的脚本上使用

    <script defer src="./main.js"></script>
</head>

您的元素未正确加载

在您的示例中，您尝试像这样访问您的 DOM 元素：

const navbarBtn = document.querySelector("navbar__btn");

但是，这是在寻找自定义标签<navbar__btn>。我相信您更有可能正在寻找具有“navbar__btn”类的标签，因此您必须添加一个点来引用一个类。

const navbarBtn = document.querySelector(".navbar__btn");

推荐阅读