时间戳

首页 > 解决方案 > 无法读取 null 类型的事件侦听器的属性

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

问题描述

我的 javascript 文件有问题，使用 Visual Studio 代码。我有一个示例 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);
    });
}

为什么会出现这个问题？

标签： javascript

解决方案

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

<!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" defer></script>
</head>
<body>
    <p> hello with JSON</p>
    <button id="btn">click me!</button>
</body>
</html>

推荐阅读