无法在 Javascript 文件（不是脚本标签）中读取 null 的属性（读取 'addEventListener'）

Question

我是一个 JavaScript 初学者，当我用 VSCode 制作 HTML、CSS、JS 项目时，我遇到了以下错误：

Uncaught TypeError: Cannot read properties of null (reading at 'addEventListener')

此外，我的项目是：使用 JavaScript 字典和一个 logged_in 变量创建一个登录 + 注册系统（如果它是假的，它将把人们重定向到注册页面）

HTML 注册文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>BeedHub Register</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src='index.js'></script>
</head>
<body>
    <h1 class="hello_world">Welcome!</h1>
    <p class="aaa">We're so excited to see you!</p>
    <div class="usernamediv">
        <input id="main_usr" placeholder="Write username here" type="text">
    </div>
    <div class="passworddiv">
        <input id="main_pw" placeholder="Write password here" type="password">
    </div>
    <div class="btn">
        <button id="main_register">Register!</button>
    </div>
    <div class="login_instead">
        <a href="C:\Users\directory\.vscode\directory\directory\directory\login">Login Instead</a>
    </div>
</body>
</html>

JavaScript 文件:

// Variables
var db = {

};
var logged_in = false;

// Register Elements
var rg_usr = document.getElementById("main_usr");
var rg_pw = document.getElementById("main_pw");
var rg_submit = document.getElementById("main_register");

// Event Listeners
rg_submit.addEventListener('click',function() {
    if (db[rg_usr.innerHTML]) {
        var error_usr_taken = document.createElement("p");
        error_usr_taken.innerHTML = "Error: Username Already Taken!";
    } else if (rg_usr.innerHTML == "" || null) {
        var error_usr_none = document.createElement("p");
        error_usr_none.innerHTML = "Error: Username is null!";
    } else if (rg_pw.innerHTML == "" || null) {
        var error_pw_none = document.createElement("p");
        error_pw_none.innerHTML = "Error: Password is null!";
    } else {
        db[rg_usr.innerHTML] = rg_pw.innerHTML;
        logged_in = true;
        window.location.pathname = "/successpage";
    };
});

如果你想让我提供更多信息，请用 ping 评论。

P.S。我也在我的 /login/index.html 文件上使用了脚本标签，但是网络上说多个 HTML 文件使用相同的 JavaScript 文件没有问题。

提前致谢，

满满的

Answer 1

您的脚本在页面上的标记之前被执行，这就是您收到错误的原因。

因此，您可以将 script 标记移动到 body 的末尾，如下所示：

<body>
    <!-- All contents here -->
    <script src='index.js'></script>
</body>

或者你可以将 defer 添加到你的脚本标签中，让它继续在 head 中，像这样：

<script src='index.js' defer></script>

无法在 Javascript 文件（不是脚本标签）中读取 null 的属性（读取 'addEventListener'）

Cannot read properties of null (reading 'addEventListener') in a Javascript file (not script tag)

javascript

html

typeerror