"style.display = 'flex/none'"不起作用



所以我认为实现if语句让元素在单击按钮时出现或消失会非常简单。几个小时后,我只想让元素消失。它注册第二次单击(使用console.log进行测试(,但display属性不会变回"flex"。

在我的句子中,我已经尝试了"getElementById"one_answers"querySelector"的不同变体。

const edit = document.getElementById('edit-btn');
const fill = document.querySelector('#filler');
edit.addEventListener('click', popInOut(fill))
function popInOut(e){
if(e.style.display=='flex'){
e.style.display='none'
}else if(e.style.display=='none'){
e.style.display='flex'
}
}

"filler"元素是一个具有此样式的引导列。

#filler{
display:flex;
flex-direction: column;
background-color: #1c1f22;
position:absolute;
top:40%;
height:50%;
}

嘿,是您的查询选择器导致了问题而且您还可以直接在函数中使用填充符,因为它声明了在全球范围内

const edit = document.getElementById("edit-btn");
const filler = document.getElementById("filler");


edit.addEventListener("click", fix);

function fix() {
if (filler.style.display === "none") {
filler.style.display = "flex";
} else {
filler.style.display = "none";
}
}
body {
font-family: sans-serif;
}
#filler {
display: flex;
/* flex-direction: column; */
background-color: whitesmoke;
position: absolute;
top: 30%;
left: 20%;
height: 50%;
gap: 1rem;
}
#filler div:nth-child(even) {
background: turquoise;
}
#filler div:nth-child(odd) {
background: yellowgreen;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="style.css"/>
</head>
<body>
<div id="app">
<div id="filler">
<div>Hare krishna</div>
<div>Radhe Shyam</div>
<div>Sita Ram</div>
</div>
<button id="edit-btn">Edit</button>
</div>
<script src="index.js"></script>
</body>
</html>

最新更新