css Question posted in
Some basic documentation can be found here.

Css – Display styling won't change

const hamburgerMenuBtn = document.getElementById("hamburger-menu-button");

hamburgerMenuBtn.addEventListener("click", function() {
  hamburgerPopupToggle()
});

function hamburgerPopupToggle() {
  console.log("Button pressed");
  const hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
  if (hamburgerMenuPopup.style.display === "block") {
    hamburgerMenuPopup.style.display = "none";
    console.log(hamburgerMenuPopup.style.display);
  } else {
    hamburgerMenuPopup.style.display = "block";
    console.log(hamburgerMenuPopup.style.display);
  }
}
#hamburger-menu-popup { display: none; }
<div class="hamburger-menu">
  <span id="hamburger-menu-button">menu</span>
  <div id="hamburger-menu-popup">
    <div id="home-button">Home</div>
    <div id="create-post">Create a Post</div>
  </div>
</div>

The popup opens
(https://i.sstatic.net/4hlVl4VL.png)
But then instead of setting display style back to "none", it sets it to "unset !important", BUT it logs that it’s "none" (https://i.sstatic.net/DadeuwQ4.png)(https://i.sstatic.net/bmL9RzHU.png)

So, for some reason it logs what was supposed to happen, but the CSS doesn’t change whatsoever. (It changes, but not as expected)

Tags:

2

Answers


  1. 0

    Please try like this :

    const hamburgerMenuBtn = document.getElementById("hamburger-menu-button");

hamburgerMenuBtn.addEventListener('click', event => {
   let hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
    if (hamburgerMenuPopup.style.display === "none") {
        document.getElementById("hamburgerMenuPopup").style.display = "block";
    } else {
        document.getElementById("hamburgerMenuPopup").style.display = "none";
    }
});
    const hamburgerMenuBtn = document.getElementById("hamburger-menu-button");

hamburgerMenuBtn.addEventListener('click', event => {
   let hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
    if (hamburgerMenuPopup.style.display === "none") {
        document.getElementById("hamburgerMenuPopup").style.display = "block";
    } else {
        document.getElementById("hamburgerMenuPopup").style.display = "none";
    }
});
    <div class="hamburger-menu">
  <span id="hamburger-menu-button">menu</span>
  <div id="hamburger-menu-popup">
    <div id="home-button">Home</div>
    <div id="create-post">Create a Post</div>
  </div>
</div>
    #hamburger-menu-popup { display: none; }
    Login or Signup to reply.
  2. 0

    Your code works fine for me, so there’s probably something else causing the issue for you (some plugin probably?).

    I recommend just toggling a class on your menu-element. This has two advantages:

    1. You don’t need the if in your JS code
    2. You can do all styling in CSS

    JS:

    let hamburgerMenuPopup = document.getElementById("hamburger-menu-popup");
hamburgerMenuPopup.classList.toggle("show");

    CSS:

    #hamburger-menu-popup{
display:none;
}

#hamburger-menu-popup.show{
display:block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search