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%;
}
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>