我正在使用JavaScript函数来检查大写锁定是否已打开，并且在控制台窗口上，我收到“ Uncaught TypeError：无法读取null的属性'addEventListener'在login.js：41“
在Google chrome的控制台窗口中，我也收到一个错误“无法识别和忽略关键的“初始尺度””
[我试图寻找导致此问题的原因，我看到有人说这可能是因为该函数在DOM运行之前执行了，所以我尝试在该函数之前添加window.onload，但未能解决问题。
// array of objects to store adminstrators data
var usersObj =[
{
username: "karim",
password: "karim2019"
},
{
username: "nourhan",
password: "noura2019"
},
{
username: "nariman",
password: "nariman2019"
}
]
// function to authenticate login information and proceed to the next page
function getLoginInfo()
{
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
for(i = 0; i < usersObj.length; i++)
{
if(username == usersObj[i].username && password == usersObj[i].password)
{
alert("Login successful..");
document.getElementById("loginf").action = "dashboard.html";
return
}
}
alert("Username or password is incorrect!");
document.getElementById("loginf").action = "login.htm";
}
var input = document.getElementById("password");
var text = document.getElementById("text");
input.addEventListener("keyup", window.onload=function(event)
{
if (event.getModifierState("CapsLock"))
{
text.style.visibility = "visible";
}
else
{
text.style.visibility = "hidden"
}
});.row {
margin-top: 5%;
}
/* Bordered form */
form {
margin-top: 20%;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 1% 2%;
margin: 1%;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
}
p{
display: none;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 1% 2%;
margin: 1%;
border: none;
cursor: pointer;
width: 100%;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.8;
}
/* Add padding to containers */
.container {
padding: 1.5%;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 1.5%;
}<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intial-scale=1 maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="loginstyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="login.js"></script>
<body>
<div class="row">
<div class="col"></div>
<div class="col">
<form id = "loginf" name="loginf" method="POST">
<div>
<h1>Account Login</h1>
</div>
<div><hr></div>
<div class="container">
<label for="username"><b>Username</b></label>
<input id="username" type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input id="password" type="password" placeholder="Enter Password" name="password" required>
<p id="text">WARNING!Caps Lock is ON.</p>
<label>
<input type="checkbox" checked="checked" name="remember">Remember me
</label>
<span class="psw"><a href="#">Forgot Password?</a></span>
<button onclick="getLoginInfo()" type="submit">Login</button>
</div>
</form>
</div>
<div class="col"></div>
</div>
</body>
</html>我已通过将事件监听器包装在窗口加载时运行的函数中来解决此问题，>
// array of objects to store adminstrators data
var usersObj =[
{
username: "karim",
password: "karim2019"
},
{
username: "nourhan",
password: "noura2019"
},
{
username: "nariman",
password: "nariman2019"
}
]
// function to authenticate login information and proceed to the next page
function getLoginInfo()
{
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
for(i = 0; i < usersObj.length; i++)
{
if(username == usersObj[i].username && password == usersObj[i].password)
{
alert("Login successful..");
document.getElementById("loginf").action = "dashboard.html";
return
}
}
alert("Username or password is incorrect!");
document.getElementById("loginf").action = "login.htm";
}
window.onload=function()
{
var input = this.document.getElementById("password");
var text = this.document.getElementById("text");
input.addEventListener("keyup", function(event)
{
if(event.getModifierState("CapsLock"))
{
text.style.display = "block";
}
else
{
text.style.display = "none";
}
});
};