Question

未捕获的类型错误：无法在 vanilla js 上设置属性“onclick”为空错误，但在 jquery 中则不行

2017-09-29

735

javascript jquery typeerror

我有两个页面， page1.html 和 page2.html ，它们链接到同一个 javascript 文件。这是第 1 页

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <button class="button">HIT ME</button>
    <div class="trig"></div>
</body>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</html>

和第 2 页

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="button_2">HIT ME</button>
</body>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</html>

的标记，这是脚本

document.querySelector(".button").onclick = function(){
    document.querySelector(".trig").style.display = "block";
}

当我刷新第 2 页时，我得到

Uncaught TypeError: Cannot set property 'onclick' of null error

显然是因为它找不到 .button 类

但是当我在 jquery 中编写同样的东西时，它在两个页面中都运行正常，没有任何错误。

$('.button').click(function(){
    $('.trig').show();
});

我想了解为什么会发生这种情况，以及如何在 vanilla js 中编写同样的东西而不出现任何错误。

Answer 1

I want to understand why this happens and how to write the same thing in vanilla js without getting any errors.

因为当带有 button 类的元素不存在时， $('.button') 不会返回 null，而 document.querySelector(".button") 会返回 null。

您需要先使用 vanila js api 检查是否为 null

var button = document.querySelector(".button");
button && ( button.onclick = function(){
    document.querySelector(".trig").style.display = "block";
});

Answer 2

当页面开始加载时，它将执行 JS 中的代码。此时尝试执行 document.querySelector('button') ... 将失败，因为文档 (DOM) 尚未完成（解析），因此它还没有按钮元素。

这有两个解决方案：

在 <script> 标签中使用 defer。这将告诉浏览器在整个页面的 () 之后执行 JS。
```
<script src="script.js" defer></script>
```
抓住 <script src="script.js"></script> 并放入 </body> 标签结束之前。这样，JS 只会在页面完成后运行。

Answer 3

因为你写错了。

你应该像这样使用它

$('.button').on("click", function(){
    document.querySelector(".trig").style.display = "block";
});