Button click open and close function not working-CodePudding

Using Javascript to open and close a navbar but it's not working in my new project When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any

This is the js code

let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
  Menupopupup.classList.add("Openmenudrops");
  document.body.style.overflow = "hidden";
}

function closedropdownheadernav() {
  Menupopupup.classList.remove("Openmenudrops");
  document.body.style.overflow = "auto";
}

This is my HTML

<nav >
        <button id="Showscroll" type="submit"  onclick="opendropdownheadernav()">
      <div  >
        <img 
          src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
          height="23"
          width="22"
          alt=""
        /></div></button>
        <ul   id="dropdownheadernav">
          <button id="Closescroll" type="button"  onclick="closedropdownheadernav()"><span >&#x2715</span></button>

This is my Css

.firstunorderedlist {
  margin-top: -40px;
  display: none;
  color: #1e2329;
  list-style: none;
  line-height: 3.5;
  background-color: #fff;
  width: 320px;
  overflow: hidden;
}

CodePudding user response：

The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.

<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
  margin-top: -40px;
  display: none;
  color: #1e2329;
  list-style: none;
  line-height: 3.5;
  background-color: #fff;
  width: 320px;
  overflow: hidden;
}
</style>
</head>
<body>

<nav >

    <button id="Showscroll" type="submit"  onclick="openNav()">
      <div  >
          <img 
            src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
            height="23"
            width="22"
            alt="">
       </div>
    </button>
    
    <ul   id="dropdownheadernav">
        <li>Code</li>
        <li>Goes</li>
        <li>Here</li>
     </ul>
     
    <button id="Closescroll" type="button"  onclick="openNav()">
        <span >&#x2715</span>
    </button>

  <script>
    let navOpened = false;
    function openNav() {
        if (navOpened) {
            navOpened = false;
            document.getElementById("dropdownheadernav").style.display = 'none';
        } else {
            navOpened = true;
            document.getElementById("dropdownheadernav").style.display = 'initial';
        }
    }
  </script>
</body>
</html>

CodePudding user response：

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: blue;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: red;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #04AA6D;
  color: white;
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>


<div >


<div >
  <a href="#home" >Navbar</a>
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="javascript:void(0);"  onclick="myFunction()">
    <i ></i>
  </a>
</div>

<div style="padding-left:16px">
  <h3>Vertical Mobile Navbar</h3>
  <p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
  <p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>

</div>
</body>
<html>