HTML Button Display but you can't interact with it-CodePudding

I have an HTML button on my webpage. It will display but you can't interact with it. Both hovering and clicking on the button seems to do nothing. When you click the button a menu is supposed to appear and when you hover the button is supposed to turn red. The problem is the button can't be interacted with.

var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");

var mobileMenuButtonOnClick = function() {
  mobileMenu.classList.remove("hidden");
};

mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.mr-0 {
  margin-right: 0;
}

.ml-auto {
  margin-left: auto;
}

.d-block {
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: 'Montserrat', sans-serif;
}

.nav-bar {
  z-index: 98;
  background-color: rgba(204, 204, 204, 0.8);
  padding: 15px;
}

.nav-img {
  height: 100px;
}

.nav-options {
  float: right;
  padding-right: 50px;
}

.nav-option {
  border: none;
  background-color: rgba(204, 204, 204, 0.1);
  height: 100px;
  width: 150px;
  font-size: large;
  cursor: pointer;
  transition: all 0.5s ease-out;
  position: relative;
  bottom: 15px;
}

.hidden {
  display: none;
}

.line {
  width: 50px;
  background-color: white;
  z-index: 99;
  height: 0.5px;
}

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav-options {
  display: table;
}

.hamburger-menu {
  background-color: transparent;
  border: none;
  position: relative;
  left: 50px;
}

.hamburger-menu :hover {
  color: red;
}

.desktop-nav {
  display: none;
}

.mobile-nav {
  display: block;
}

<div >
  <nav >
    <a href="index.html"><img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" ></a>
    <div >
      <button  id="mobile-menu-enter">
                      <div ></div><br>
                       <div ></div><br>
                      <div ></div>
                      The button that is not working
                    </button>
    </div>
  </nav>

  <div  id="mobile-menu-id">
    the menu
  </div>
</div>

CodePudding user response：

Delete space between .hamburger-menu and :hover. Event click on mobileMenuButton works.

var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");

var mobileMenuButtonOnClick = function() {
  mobileMenu.classList.remove("hidden");
};

mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.mr-0 {
  margin-right: 0;
}

.ml-auto {
  margin-left: auto;
}

.d-block {
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: 'Montserrat', sans-serif;
}

.nav-bar {
  z-index: 98;
  background-color: rgba(204, 204, 204, 0.8);
  padding: 15px;
}

.nav-img {
  height: 100px;
}

.nav-options {
  float: right;
  padding-right: 50px;
}

.nav-option {
  border: none;
  background-color: rgba(204, 204, 204, 0.1);
  height: 100px;
  width: 150px;
  font-size: large;
  cursor: pointer;
  transition: all 0.5s ease-out;
  position: relative;
  bottom: 15px;
}

.hidden {
  display: none;
}

.line {
  width: 50px;
  background-color: white;
  z-index: 99;
  height: 0.5px;
}

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav-options {
  display: table;
}

.hamburger-menu {
  background-color: transparent;
  border: none;
  position: relative;
  left: 50px;
}

.hamburger-menu:hover {
  color: red;
}

.desktop-nav {
  display: none;
}

.mobile-nav {
  display: block;
}

<div >
  <nav >
    <a href="index.html"><img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" ></a>
    <div >
      <button  id="mobile-menu-enter">
                      <div ></div><br>
                       <div ></div><br>
                      <div ></div>
                      The button that is not working
                    </button>
    </div>
  </nav>

  <div  id="mobile-menu-id">
    the menu
  </div>
</div>

CodePudding user response：

You could always use the .toggle() method instead from the classList object to best interact with the hiding and showing on the menu of the left. Additionally, to simulate the burger menu, use a SVG code instead so it looks more pro, as well as adding the red background you are looking for, something like the one on the code below. Take a look at this snippet of code. I certainly hope this helps, pal!

var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");

var mobileMenuButtonOnClick = function() {
  mobileMenu.classList.toggle("hidden");
};

mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);

body,
html {
    height: 100%;
}

body {
    overflow-x: hidden;
    font-size: large;
    margin: 0;
}

.mr-0 {
    margin-right: 0;
}

.ml-auto {
    margin-left: auto;
}

.d-block {
    display: block;
}

h1,
h2,
h3,
h4 {
    font-family: 'Montserrat', sans-serif;
}

.nav-bar {
    z-index: 98;
    background-color: rgba(204, 204, 204, 0.8);
    padding: 15px;
}

.nav-img {
    height: 100px;
}

.nav-options {
    float: right;
    padding-right: 50px;
}

.nav-option {
    border: none;
    background-color: rgba(204, 204, 204, 0.1);
    height: 100px;
    width: 150px;
    font-size: large;
    cursor: pointer;
    transition: all 0.5s ease-out;
    position: relative;
    bottom: 15px;
}

.hidden {
    display: none;
}

.line {
    width: 50px;
    background-color: white;
    z-index: 99;
    height: 0.5px;
}

.mobile-nav {
    display: none;
    position: relative;
}

.mobile-nav-options {
    display: table;
}

.hamburger-menu {
    background-color: transparent;
    border: none;
    position: relative;
    left: 50px;
}

.hamburger-menu:hover {
    background-color: red;
    border-radius: 4px;
}

.desktop-nav {
    display: none;
}

.mobile-nav {
    display: block;
}

<div >
   <nav >
      <a href="index.html"><img src="https://c402277.ssl.cf1.rackcdn.com/photos/20852/images/magazine_medium/axolotl_WWsummer2021.jpg?1618758847" ></a>
      <div >
         <button  id="mobile-menu-enter">
            <!--?xml version="1.0" ?-->
            <svg style="color: white" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
               <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" fill="white"></path>
            </svg>
         </button>
      </div>
   </nav>
   <div  id="mobile-menu-id">
      MENU GOES HERE
   </div>
</div>