我编写了一些代码，并希望构建一个弹出窗口，供用户在按下登录按钮时登录。但是，我不能这样做，也无法找出代码中的错误。有人愿意帮助解决这个问题吗？非常感谢
下面是html代码:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/timetabling.css">
<title>Time-tabling system</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="button">
<button class="btn login">Login</button>
<div class="popup">
<div class="popup-content">
<img scr="close.png" alt="Close" class="close">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<a href="#" class="button">Login</a>
</div>
</div>
<script>
document.getElementByID("button").addEventListener("click", function(){
document.querySelector(".popup").style.display = "flex";
})
document.querySelector(".close").addEventListener("click", function(){
document.querySelector(".popup").style.diplay = "none";
})
</script>
</div>
</div>
</div>
<img align="center" src="keep-habbit-tracking.jpg" alt="habbit" width="600" height="300">
<p align="center">Welcome to the time-tabling system!!</p>
<p align="center">This is a place for you to set your time table and schedule your work...</p>
<p align="center">Please login to begin</p>
<div id="footer">
<hr>
<p id="footerText">Group 18 The time tabling system</p>
</div>
</div>
</body>
</html>
下面是CSS代码:
body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
}
#main { background: #eee }
#widgetBar {
height: 50px;
width: 850px;
float: right;
background: #ccc;
}
.btn {
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: small;
float:right;
cursor: pointer;
display: inline-block;
}
.btn:hover {background: #eee;}
.login {color: green;}
.popup{
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: none;
justify-content: center;
align-items: center;
}
.popup-content{
height: 250px;
width: 500px;
background: #fff;
padding: 20px;
border-radius: 5px;
position: relative;
}
input{
margin: 20px auto;
display: block;
width: 50%;
padding: 8px;
border: 1px solid gray;
}
.close{
position: absolute;
top: -15px;
right: -15px;
background: #fff;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75);
cursor: pointer;
}
#footer {
height: 60px;
width: 300px;
font-size: small;
clear: left;
}
这是我运行代码后应该显示的页面。但是当我单击登录按钮时，不存在供用户登录的弹出窗口。
最佳答案
需要注意的一些事情 getElementById 末尾是一个小写 D。我认为除了 querySelector 之外，坚持这一点至少是我会做的事情(如果不使用 JQuery)。在正文后添加脚本标签和所有 javascript。不要将其添加到您的代码中。一段时间后它会变得困惑并且无法阅读。如果您使用 getElementById('button')，请确保它是 ID 而不是类。
document.getElementById("button").addEventListener("click", function(){
document.getElementById("popup").style.display = "flex";
})
document.getElementById("close").addEventListener("click", function(){
document.getElementById("popup").style.diplay = "none";
})body {
font-family: Arial, Helvetica, sans-serif;
width: 850px;
text-align: center;
margin: 20px auto;
}
#main { background: #eee }
#widgetBar {
height: 50px;
width: 850px;
float: right;
background: #ccc;
}
.btn {
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: small;
float:right;
cursor: pointer;
display: inline-block;
}
.btn:hover {background: #eee;}
.login {color: green;}
.popup{
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: none;
justify-content: center;
align-items: center;
}
.popup-content{
height: 250px;
width: 500px;
background: #fff;
padding: 20px;
border-radius: 5px;
position: relative;
}
input{
margin: 20px auto;
display: block;
width: 50%;
padding: 8px;
border: 1px solid gray;
}
.close{
position: absolute;
top: -15px;
right: -15px;
background: #fff;
height: 20px;
width: 20px;
border-radius: 50%;
box-shadow: 6px 6px 29px -4px rgba(0,0,0,0.75);
cursor: pointer;
}
#footer {
height: 60px;
width: 300px;
font-size: small;
clear: left;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/timetabling.css">
<title>Time-tabling system</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="widgetBar">
<div class="button">
<button class="btn login" id="button">Login</button>
<div class="popup" id="popup">
<div class="popup-content">
<img scr="close.png" alt="Close" class="close" id="close">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<a href="#" class="button">Login</a>
</div>
</div>
</div>
</div>
</div>
<img align="center" src="keep-habbit-tracking.jpg" alt="habbit" width="600" height="300">
<p align="center">Welcome to the time-tabling system!!</p>
<p align="center">This is a place for you to set your time table and schedule your work...</p>
<p align="center">Please login to begin</p>
<div id="footer">
<hr>
<p id="footerText">Group 18 The time tabling system</p>
</div>
</div>
</body>
</html>关于javascript - 弹出登录窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60162365/