No se pueden leer las propiedades de nulo (leyendo 'addEventListener') en un archivo Javascript (no en la etiqueta del script) [duplicado]

Soy un principiante de JavaScript y cuando estaba haciendo un proyecto HTML, CSS, JS con VSCode, encontré el siguiente error:

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

Además, mi proyecto fue: crear un sistema de inicio de sesión y registro con solo diccionarios de JavaScript y una variable login_in (que redirigirá a las personas a la página de registro si es falsa)

Archivo de registro 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>

Archivo 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";
    };
});

Si quieres que te brinde más información, comenta con un ping.

PD: también he usado la etiqueta de secuencia de comandos en mi archivo /login/index.html, pero la web dice que múltiples archivos HTML que usan el mismo archivo JavaScript no tienen ningún problema.

Gracias por adelantado,

beedful

Answer

Su secuencia de comandos se ejecuta antes de que el marcado esté en la página y es por eso que recibe un error.

Entonces, puede mover la scriptetiqueta al final de la bodysiguiente manera:

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

O puede agregar defera su etiqueta de secuencia de comandos y dejar que continúe en el head, así:

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