gpt4 book ai didi

javascript - 无法读取 Javascript 文件(非脚本标记)中 null 的属性(读取 'addEventListener' )

转载 作者:行者123 更新时间:2023-12-03 08:11:23 24 4
gpt4 key购买 nike

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

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

此外,我的项目是:仅使用 JavaScript 字典和登录变量(如果为 false,会将人们重定向到注册页面)制作一个登录 + 注册系统

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 进行评论。

附注我还在我的/login/index.html 文件上使用了 script 标签,但是网络上说多个 HTML 文件使用同一个 JavaScript 文件没有问题。

提前致谢,

充满活力

最佳答案

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

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

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

或者您可以将 defer 添加到脚本标记中,并让它继续位于 head 中,如下所示:

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

关于javascript - 无法读取 Javascript 文件(非脚本标记)中 null 的属性(读取 'addEventListener' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70721000/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com