开发者问题收集

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

2020-04-13
348
javascript html css

因此，当我尝试在浏览器中运行我的 html 文件时，chrome 会记录该错误，但在 Visual Studio Code 中不会记录任何问题。我该如何修复这个问题并确保将来不会再发生这种情况？我的 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");
  }
});
3个回答

您的代码可能存在两个错误。

在 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");
Phy
2020-04-13

要运行 jquery 代码，它必须始终括在 $() 内，而您在 navbarBtn.addEventListener("click", function () 中遗漏了这一点 {

试试这个： 

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");
    } 
});

此外，您真的不需要 addEventListener 函数，因为 Jquery 会自动检测您是否单击了按钮。

此代码也应该有效： 

$(navbarBtn).on('click,function(){ 
    // your logic here
});
Rohan Rao
2020-04-13

问题是，它找不到您尝试将事件附加到的节点。因此，它必须与 document.querySelector() 方法的工作相关联。

您可能想要发送节点的 id 或 class ，但这不是传递 id 和 class 值的正确方法。

您应该将代码重写为 

// If you are passing id    
const navbarBtn = document.querySelector("#navbar__btn");
const navbarLinks = document.querySelector("#navbar__links");


// If you are passing class
const navbarBtn = document.querySelector(".navbar__btn");
const navbarLinks = document.querySelector(".navbar__links");

请记住，如果您已将 class 作为参数传递，您将获得第一个元素。

shivamragnar
2020-04-13