This a project from school that I've been working on but I'm facing some obstacles in the Sidebar button at the top left corner. The button is opening and showing a blank white page can someone help me out?
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>You have several things that need attention, but the primary two are:
type="button" on your button elements, so
they default to acting like type="submit" and cause your form to
submit, but your form doesn't have a path for the action, so you
just get a blank page.form element in the first place.Beyond that, you should avoid inline styles whenever possible because they are the hardest styles to override and they lead to duplication of code and clutter up the code in general.
Avoid inline event attributes as well and hook up your elements to events in JavaScript with .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>