在javascript控制元素的显示模式，元素的display被js改成block之后，无法再变回none
在js中为html的两个按钮分别定义了点击事件，第一个点击事件使一个元素的display变成block，第二个点击事件使同一个元素的display变成none，然而该元素变成block之后，点击第二个按钮并不会使这个元素隐藏。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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");
然后查看控制台，能得到相应输出，证明点击有效：
想要的结果：
点击关闭按钮后，小窗口能够关闭
修改代码如下
btn2.onclick = function (event) {
p1.style.display = 'none';
console.log("yes");
event.stopPropagation()
}
<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> -->
<style>
* {
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;
}
</style>
</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="modify">【修改密码】</div>
<div id="p1">
<div class="u9">
<div class="u8">修改密码</div>
<input type="button" id='btn2' value="×">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//时间
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('modify');
var p1 = document.getElementById('p1');
btn1.onclick = function () {
p1.style.display = 'block';
}
//关闭修改密码框
var btn2 = document.getElementById('btn2')
btn2.onclick = function () {
p1.style.display='none';
}
</script>
</html>
改成这样试试，你的这个代码存在一定问题啊！你那样好像会触发冒泡事件(我也不知道是不是这个),实际上你那个关闭按钮是起了作用的，但是因为那个冒泡事件，导致那个修改密码的按钮也同时触发了一次，因此看到的效果就好像关闭按钮没有起作用。
还有，下次记得代码分享出来，把格式处理好啊！