Este es un proyecto de la escuela en el que he estado trabajando, pero me enfrento a algunos obstáculos en el botón de la barra lateral en la esquina superior izquierda. El botón se abre y muestra una página en blanco en blanco. ¿Alguien puede ayudarme?
function open() { document.getElementById("sidebar").style.display = "relative"; } function close() { document.getElementById("sidebar").style.display = "none"; } #sidebar { display: none; height: 100%; width: 10%; background-color: #3c1642; justify-self: left; } <nav id="navBar" class="menuBar"> <button onclick="open()" style="border: 0px; background-color: #272640;"> <div class="menuBar" > <div class="menu-inner"> <span class="bar bar-1" id="br1"></span> <span class="bar bar-2" id="br2"></span> <span class="bar bar-3" id="br3"></span> </div> </div> </button> <div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;"> </div> <div id="head" class="menuOptions" style="flex-grow: 3; border-left: 0px; border-right: 0px; align-self: center; justify-content: center; position: relative;"> <a href="" style="text-decoration:none; text-decoration-color: #f72585; ">WD BOOTCAMP</a> </div> <div class="menuOptions" style="flex-grow: 3; justify-content: end; border-left: 0px; align-self: right; "> <a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a> <a class="menuBut"></a> <form action="" style="display: flex; justify-self: end; height: 30%; margin-top: 30px;"> <input type="text" id="searchBar" placeholder="search"> </form> </div> </nav> <div id="sidebar"> <button onclick="close()">Close X</button> <a href="">link1</a> <a href="">link2</a> <a href="">link3</a> </div>Hay varias cosas que necesitan atención, pero las dos principales son:
type="button" en los elementos de su button , por lo que actúan de manera predeterminada como type="submit" y hacen que su formulario se envíe, pero su formulario no tiene una ruta para la action , por lo que solo obtiene una página en blancoform en primer lugar.Más allá de eso, debe evitar los estilos en línea siempre que sea posible porque son los estilos más difíciles de anular y conducen a la duplicación del código y desordenan el código en general.
Evite también los atributos de eventos en línea y conecte sus elementos a eventos en JavaScript con .addEventListener() .
const sidebar = document.getElementById("sidebar"); sidebar.querySelector("button").addEventListener("click", function(){ sidebar.classList.add("hidden"); }); document.querySelector("button.butStyle1").addEventListener("click", function(){ sidebar.classList.remove("hidden"); }); #sidebar { height: 100%; width: 10%; background-color: #3c1642; justify-self: left; } /* Put styles that might need to be added/removed in separate classes so that just that property can be adjusted as needed. */ .hidden { display: none; } /* Avoid inline styles whenever possible */ .menuOptions { flex-grow: 3; border-left: 0px; border-right: 0px; position: relative; } .flexStyles1 { align-self: center; justify-content: center; } .flexStyles2 { align-self: right; justify-content: end; } .butStyle1 { border: 0px; background-color: #e0e0e0; } .form { display: flex; justify-self: end; height: 30%; margin-top: 30px; } <nav id="navBar" class="menuBar"> <button type="button" class="butStyle1"> <div class="menuBar" > <div class="menu-inner"> <span class="bar bar-1" id="br1">x</span> <span class="bar bar-2" id="br2">y</span> <span class="bar bar-3" id="br3">z</span> </div> </div> </button> <div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;"> </div> <div id="head" class="menuOptions flexStyles1"> <a href="" style="text-decoration:none; text-decoration-color: #f72585; ">WD BOOTCAMP</a> </div> <div class="menuOptions flexStyles2"> <a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a> <a class="menuBut"></a> <input type="text" id="searchBar" placeholder="search"> </div> </nav> <div id="sidebar" class="hidden"> <button type="button">Close X</button> <a href="">link1</a> <a href="">link2</a> <a href="">link3</a> </div>