Así que pensé que sería bastante simple implementar una declaración if para que un elemento apareciera o desapareciera con solo hacer clic en un botón. Después de un par de horas, no he ido más allá de lograr que el elemento desaparezca. Registra el segundo clic (probado con un archivo console.log), pero la propiedad de visualización no vuelve a cambiar a 'flex'.
También probé diferentes variaciones de 'getElementById' y 'querySelector' durante mi oración.
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' } }El elemento 'relleno' es una columna de arranque con este estilo.
#filler{ display:flex; flex-direction: column; background-color: #1c1f22; position:absolute; top:40%; height:50%; }oye, es tu selector de consultas el que está causando el problema y también puedes usar tu relleno directamente en función porque está declarado en alcance global
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>