"style.display = 'flex/none'" not working
Question
So I thought it would be pretty simple to implement an if statement to have an element appear or disappear at the click of a button. After a couple of hours now, I have not gotten further than getting the element to disappear. It registers the second click(tested with a console.log), but the display property does not change back to 'flex'.
I've also already tried different variations of 'getElementById' and 'querySelector' during my sentence.
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'
}
}
The 'filler' element is a bootstrap column with this styling.
#filler{
display:flex;
flex-direction: column;
background-color: #1c1f22;
position:absolute;
top:40%;
height:50%;
}
1 answers
solution1
0 ACCPTED 2022-01-17 01:37:29
hey it is your query selector which is causing the problem and also you can use your filler directly in function because its declared in global scope
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.