The menu close button only works once, can you help me?-CodePudding

I created a navbar using javascript, the closing button is only used once, if I repeatedly open and close the menu, the closing button does not work, maybe there is an error but I can't access it, can someone help me? thank you ..................................................................................................................................................................................

function myFunction() {
  const e = document.createElement('div');
  e.className = 'hello';
  e.innerHTML = `
    
        <span id="hi" >
        close
        </span>
         <a  href="#">Home
           <span >home</span>
         </a>
         <a  href="#">About us
           <span > business</span>
         </a>
         <a  href="#">Products
           <span > local_mall </span>
         </a>
         <a  href="#">Contact
           <span > call</span>
         </a> 
    `
  e.style.backgroundColor = '#a90707'
  e.style.display = 'flex'
  e.style.flexDirection = 'column'
  e.style.width = '50%'
  e.style.height = '100vh'
  e.style.position = 'absolute'
  e.style.right = '0'
  e.style.top = '0'
  e.style.color = 'white'
  e.style.fontSize = '25px'
  document.body.appendChild(e);
  let ibt = document.querySelector('#hi')
  ibt.addEventListener('click', function()
    {
      if (e.style.display = 'block') {
        e.style.display = 'none'
      }
    })
}

@media screen and (max-width: 892px)
{
  nav ul{
    width: 60%;
  }
 
  .topnav a.icon {
    float: right;
    display: block;
  }
 
  .topnav a {
    display: none;
  }
  /*  */
 .na{
  color: white;
 list-style: none;
 padding: 20px 10px;
 text-decoration: none;
 font-size: 1.2rem;
 display: inline-block;
  position: relative;
 }
 /*  */
 .na::before{
  content: '';
    height: 2px;
    width:0;
    background-color: white;
    position: absolute;
    bottom:10px;
    left: 20px;
    transition: width 0.25s ease-out;
 }
 .na:hover::before{
  width: 15%;
 }
  /*  */
 #hi{
  padding-top: 15px;
  padding-left: 10px;
  cursor: pointer;
  display: inline-block;
  position: relative;
 }
  /*  */
 #hi::before{
    content: '';
    height: 2px;
    width:0;
    background-color: white;
    position: absolute;
    bottom:-2px;
    left: 12px;
    transition: width 0.25s ease-out;
  }
  #hi:hover::before{
  width: 6%;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="this is the big store to sell food products">
    <title>Hasaballa Market</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link href="https://fonts.googleapis.com/icon?family=Material Icons"
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material Icons Outlined"
      rel="stylesheet">
</head>
<body>
 <header>
   <nav  id="myTopnav">
     <img src="images/logo.png" alt="no pic" width="80px">
     <ul>
       <li><a href="#">Contact
         <span > call</span>
       </a></li>
       <li><a href="#">Products
         <span > local_mall </span>
       </a></li>
       <li><a href="#">About us
         <span > business</span>
       </a></li>
       <li><a  href="#">Home
         <span >home</span>
       </a></li>
       <li><a href="javascript:void(0);"  onclick="myFunction()">&#9776;</a> </li>
     </ul>
   </nav>
 </header>

CodePudding user response：

When comparing values, you need the "equal" comparison operator (==), not an assignment (=).

if (e.style.display == 'block') {

But also note that you don't have any logic to unhide the element once it's been hidden. I would use:

if (e.style.display != 'block') {
  e.style.display = 'block';
} else {
  e.style.display = 'none';
}

CodePudding user response：

When comparing values (inside an if statement) use ===, not = (assignment operator)
start your menu (navbar) as display: none; than you can toggle the display = "flex" / "none" in a ternary operator ?:
Don't use inline JS on* handlers. JS should be in one place only and that's the respective tag or file. Use EventTarget.addEventListner() instead.

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const css = (el, styles) => typeof styles === "object" ? Object.assign(el.style, styles) : el.style.cssText = styles;


// Task: create navbar:

const createNavbar = () => {

  const elNavbar = elNew('div', {
    className: "navbar",
    innerHTML: `
      <span >close</span>
      <a  href="#"><span >home</span> Home</a>
      <a  href="#"><span >business</span> About us</a>
      <a  href="#"><span >local_mall</span> Products</a>
      <a  href="#"><span >call</span> Contact</a> 
    `
  });

  css(elNavbar, `
    display: none;
    background-color: #a90707;
    flex-direction: column;
    width: 50%;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    font-size: 25px;
  `);

  el("body").append(elNavbar);
  
  const toggleNavbar = () => {
    const isHidden = elNavbar.style.display === "none"
    elNavbar.style.display = isHidden ? "flex" : "none";
  };
  
  // Toggle navbar:
  els(".toggleNavbar").forEach((elBtn) => {
    elBtn.addEventListener("pointerdown", toggleNavbar);
  });
};

// Init:
createNavbar();

<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">

<button  type="button">Menu</button>