I have developed a JavaScript-powered navbar, but I am facing an issue with the closing button. It seems to work only once. If I try to open and close the menu repeatedly, the closing button stops working. I suspect there might be an error in my code, but I am unable to identify it. Can anyone provide assistance with this? Thank you for your help.
function myFunction() {
const e = document.createElement('div');
e.className = 'hello';
e.innerHTML = `
<span id="hi" class="material-icons">
close
</span>
<a class="na" href="#">Home
<span class="material-icons">home</span>
</a>
<a class="na" href="#">About us
<span class="material-icons"> business</span>
</a>
<a class="na" href="#">Products
<span class="material-icons"> local_mall </span>
</a>
<a class="na" href="#">Contact
<span class="material-icons"> 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,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a4d584b4e4a383a24242e32">[email protected]</a>,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 class="topnav" id="myTopnav">
<img src="images/logo.png" alt="no pic" width="80px">
<ul>
<li><a href="#">Contact
<span class="material-icons"> call</span>
</a></li>
<li><a href="#">Products
<span class="material-icons"> local_mall </span>
</a></li>
<li><a href="#">About us
<span class="material-icons"> business</span>
</a></li>
<li><a href="#">Home
<span class="material-icons">home</span>
</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </li>
</ul>
</nav>
</header>