無法在 Javascript 文件（不是腳本標簽）中讀取 null 的屬性（讀取“addEventListener”）

Question

我是 JavaScript 初學者，當我使用 VSCode 制作 HTML、CSS、JS 項目時，遇到以下錯誤：

未捕獲的類型錯誤：無法讀取 null 的屬性（在“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 評論。

PS I have also used the script tag on my /login/index.html file, but the web says that multiple HTML files using the same JavaScript file have no problem.

提前致謝，

乖巧的

Answer 1

您的腳本在頁面上的標記之前執行，這就是您收到錯誤的原因。

因此，您可以像這樣在body的最后移動script標簽：

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

或者您可以將defer添加到您的 script 標簽並讓它繼續在head中，如下所示：

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

無法在 Javascript 文件（不是腳本標簽）中讀取 null 的屬性（讀取“addEventListener”）

問題描述

1 個解決方案

解決方案1
0 2022-01-15 12:00:45

無法在 Javascript 文件（不是腳本標簽）中讀取 null 的屬性（讀取“addEventListener”）

問題描述

1 個解決方案

解決方案1 0 2022-01-15 12:00:45

解決方案1
0 2022-01-15 12:00:45