1

When I initially click on the selected ID my code does not work on the initial click but then works as expected when I click again. I can see no obvious reason as to why this is happening.

Any help/suggestions would be great.

*I have now added the CSS for further review. Please can you look through the code again as I am having a headache trying to figure this out. 

<section>
  <div id="top-bar-container">
    <img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
    <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
    <nav id="nav-bar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li>
          <a href="#">Services</a>
          <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Branding</a></li>
            <li><a href="#">Consulting</a></li>
            <li><a href="#">SEO</a></li>
          </ul>
        </li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</section>

var hamIcon = document.getElementById("hamburger-icon");

// open and close the navigation menu
hamIcon.onclick = function() {
  var navBar = document.getElementById("nav-bar");
  if (navBar.style.display === "none") {
    navBar.style.display = "block";
  } else {
    navBar.style.display = "none";
  }
};

body {
  padding: 0px;
  margin: 0px;
  font-family: "Roboto", sans-serif;
}

#top-bar-container {
  background-color: #ec671c;
  width: 100%;
  height: 75px;
  position: absolute;
  z-index: 1;
}

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
  top: 20px;
}

#hamburger-icon:hover {
  color: orange;
}

/* START OF MEDIA QUERIES */
@media screen and (max-width: 767px) {

#hamburger-icon {
    display: block;
}

#nav-bar {
    padding-right: 0px;
    margin-top: 50px;
    display: none;
}
}
Coder
  • 809
  • 1
  • 10
  • 23
  • Your DOM is not loaded yet, so `navBar` is undefined the first time you run it. Second time runs fine, because DOM is loaded and `navBar` refers to an actual element. – Alexander May 12 '19 at 16:47
  • 1
    @Alexander _"Your DOM is not loaded yet"_ - If this was the case the `click` handler wouldn't be added to the DOM because there wouldn't be a `#hamburger-icon` element – Andreas May 12 '19 at 16:49
  • 3
    `navBar.style.display` will be `undefined` on the first click of `#hamburger-icon` because the `.style` property will only contain the properties defined in the markup of the element - until you change it in your code. – Andreas May 12 '19 at 16:50
  • If I take this code and put it in jsfiddle, everything is initially shown. I click and it disappears. I click again and reappears. To me, this looks okay. a) There may be more pieces to this puzzle you aren't showing, b) Please be more specific about what you expect to happen. Initial state, etc. – CrayonViolent May 12 '19 at 16:51
  • 1
    https://stackoverflow.com/questions/28100979/button-does-not-work-on-the-first-click - Take a look at this, the same issue has been discussed and clarified before. – Avanthika May 12 '19 at 16:51
  • At the very least, don't lob your HTML and JS into the same code block. Either add a runnable snippet (which is highly recommended for something this small) or make sure that your code covers a [mcve] by removing the parts that don't matter (remove the `` and ``, remove almost all those `
  • `, etc. and then put the script in `
    • – Mike 'Pomax' Kamermans May 12 '19 at 16:59
  • Also note that we're not using HTML4.1 or below anymore. Don't use `href="#"` in HTML5, that `#` actually means something, and unless you intend for those links to navigate the user to the top of the page: don't use them. Just prespecify the real links, and then have JS do "whatever it needs to do, later". – Mike 'Pomax' Kamermans May 12 '19 at 17:01
  • @Andreas you are right. I wasn't careful at reading it was an `onclick` event. – Alexander May 12 '19 at 17:07