我正在使用JavaScript函数检查大写锁定是否已打开,并且在控制台窗口上,我收到“ Uncaught TypeError:无法读取null的属性'addEventListener' 在login.js:41“
在谷歌浏览器的控制台窗口中,我也收到一条错误消息 “无法识别和忽略关键的“初始尺度””
我尝试寻找导致此问题的原因,我看到有人说这可能是因为该函数在DOM运行之前执行了,所以我尝试在该函数之前添加window.onload,但未能解决问题。 / p>
// 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>