when I click the button to open the sidebar it brings a blank white page

Question

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>

This is not an on demand help site. Please post the code you have and describe the problem you have. — cloned, May 10 '22 at 14:42
I couldn't figure out how to put the code in sorry I edited it — Sahil Shrivastava, May 10 '22 at 14:45
`relative` is not an allowed value for the `display` property. — CBroe, May 10 '22 at 14:48
Are you referring to the `WD BOOTCAMP` link? What are you expecting to happen? My guess is that you want to [prevent the default click event](https://stackoverflow.com/questions/7056669/how-to-prevent-default-event-handling-in-an-onclick-method) instead of opening a blank link? — WOUNDEDStevenJones, May 10 '22 at 14:49
You haven't specified a `type` for your button, so it's acting as a `type="submit"`. Add `type="button"` to prevent the default submit behavior. — Scott Marcus, May 10 '22 at 14:50
And you should name your functions differently. In the global scope, they are properties of the window object - but `window.open` and `window.close` exist as methods already, so this is likely to conflict. — CBroe, May 10 '22 at 14:52
@ScottMarcus, that's why I habitually use the `preventDefault()` command just in case — Andrew Corrigan, May 10 '22 at 14:53
You've also created your CSS selector as an `id` selector, which is difficult to override. Use a CSS class and class selector instead. — Scott Marcus, May 10 '22 at 14:53
@AndrewCorrigan ??? That's really not a great way to work. Use the right HTML for the job and you won't need JavaScript patches. — Scott Marcus, May 10 '22 at 14:54
I changed the function name to **SidebarOpen & SidebarClose** and now the button isn't working — Sahil Shrivastava, May 10 '22 at 14:56
@ScottMarcus - I mostly use ASP so it's not usually pure HTML, plus a lot of elements tend to be created dynamically through jQuery, so `preventDefault` saves me the grief of having to hunt down wherever the guy who made the button put it. — Andrew Corrigan, May 10 '22 at 14:56
Also, @SahilShrivastava, why've you got a menu bar within a button? Can't imagine that looking nice — Andrew Corrigan, May 10 '22 at 14:59
@AndrewCorrigan I dunno what else should I put it in, I've tried putting it in hyperlink but It's still ugly — Sahil Shrivastava, May 10 '22 at 15:00
@SahilShrivastava sometimes it's better for a thing to not be in things — Andrew Corrigan, May 10 '22 at 15:02
but then how would it act like a button and have the animation effect that I want it to have — Sahil Shrivastava, May 10 '22 at 15:04

Scott Marcus · Answer 1 · 2022-05-10T18:38:55.963

You have several things that need attention, but the primary two are:

You aren't specifying 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.
Unless you will be submitting data to another location, you shouldn't even have a 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>

when I click the button to open the sidebar it brings a blank white page

1 Answers1