在js中为html的两个按钮分别定义了点击事件，第一个点击事件使一个元素的display变成block，第二个点击事件使同一个元素的display变成none，然而该元素变成block之后，点击第二个按钮并不会使这个元素隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../导航栏/导航栏.css" type="text/css">
<link rel="stylesheet" href="./代办系统.css" type="text/css">
<script src="代办系统.js" type="text/javascript" defer="true" ></script>
<script src="../导航栏/导航栏.js" type="text/javascript" defer="true"></script>
</head>
<body>
<div class="u0">
<div class="u1">
<h1 >电力巡查系统</h1>
</div>
<div class="u2" id="dateTime"></div>
<div class="u3">欢迎admin 角色：系统管理员</div>
<div id="btn1">【修改密码】
<div id="p1">
<div class="u9">
<div class="u8">修改密码</div>
<input type="button" id='btn2' value="×" >
</div>
</div>
</div>
</div>
</body>
</html>
```css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.u0{
height: 100px;
}
.u1{
width: 300px;
margin-left: 50px;
float: left;
text-align: center;
line-height: 100px;
}
.u2{
text-align: center;
margin-top: 20px;
width: 500px;
float: left;
color: blue;
font-size: 15px;
}
.u3{
float: left;
text-align: center;
margin-top: 20px;
font-size: 15px;
}
#btn1{
border: none;
float: left;
margin-left:50px ;
margin-top: 20px;
cursor: pointer;
position: relative;
font-size: 15px;
}
#p1{
display: none;
width: 300px;
height: 200px;
background-color: white;
position: absolute;
right: 0px;
border: 1px solid black;
}
.u5{
display: flex;
/*flex-direction: row;*/
/*flex-wrap: nowrap;*/
flex-flow: row nowrap;
justify-content: center;
background-color: blue;
}
.u6{
list-style: none;
text-align: center;
line-height: 30px;
height: 30px;
width: 300px;
}
.u7{
color: black;
text-decoration: none;
}
.u8{
display: inline-block;
float:left;
}
#btn2{
display: inline-block;
float: right;
height: 20px;
width: 30px;
text-align: center;
}
.u9{
background-color: silver;
height: 20px;
}
```javascript
//时间
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var date = time.getDate();
var day = time.getDay();
var hour = time.getHours();
var minute = time.getMinutes();
var array = ['周日','周一','周二','周三','周四','周五','周六'];
var u1 = document.getElementById('dateTime');
u1.innerText = year + '年' + month + '月' + date +'日 ' + array[day] + ' ' + hour + '：' + minute;
//修改密码
var btn1 = document.getElementById('btn1');
var p1 = document.getElementById('p1');
btn1.onclick = function () {
p1.style.display = 'block';
}
//关闭修改密码框
var btn2 = document.getElementById('btn2')
btn2.onclick = function () {
p1.style.display = 'none';
console.log("yes");
}
这是运行后的界面：
点击修改密码：
点击弹出的小窗口的关闭按钮，小窗口不会关闭。
我在该关闭按钮设置的点击事件中添加了如下代码
console.log("yes");
然后查看控制台，能得到相应输出，证明点击有效：
想要的结果：
点击关闭按钮后，小窗口能够关闭
