Question

使用Visual Studio代码时，我的JavaScript文件出现问题。我有一个示例HTML文件。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <p> hello with JSON</p>
    <button id="btn">click me!</button>
</body>
</html>

我试图将eventListener添加到我添加的按钮

const btn = document.getElementById("btn");


btn.addEventListener("click", getData)


function getData(){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then((res) => { return res.json() })
    .then((data) => { 
        console.log(data);
    });
}

为什么会发生此问题？

Answer 1

如果您不想重构大部分代码，则将defer关键字添加到脚本标签中，如下所示：

/Users/mark/StackOverflow/images/b.png /Users/mark/StackOverflow/masks/b.png
/Users/mark/StackOverflow/images/a.png /Users/mark/StackOverflow/masks/a.png

Answer 2

将脚本引用移至正文部分的结尾。

<body>
    <p> hello with JSON</p>
    <button id="btn">click me!</button>
    <script src="main.js"></script>
</body>

这样，您的代码将在按钮HTML已经呈现并准备就绪后运行。

Answer 3

您需要等到文档完全加载后才能进行DOM操作（在您的情况下，将侦听器绑定到button元素）。如果您在元素可用之前执行脚本，则找不到该脚本，也不会添加侦听器。

一种方法是将脚本部分（外部文件或直接在HTML文件内部的脚本）放置在页面底部，或者至少放置在<button>声明之后。
另一种方法是将其放在顶部，但在脚本部分中，您需要等待DOM加载。为此，请参见此处：https://stackoverflow.com/a/800010/3233827

Answer 4

将脚本标签移动到body标签的末尾，而不将其包括在head标签中。

通常，在编写代码的html部分之后添加script标签是一种很好的做法。

在您的情况下，浏览器会在执行主标记之前加载并执行脚本，从而导致您的问题。

无法读取类型为null的事件侦听器的属性

4 个答案: