I was making a menu Button for a site , so when i click on menu , it change its innerhtml but when i click on close button its not changing its innerhtml.
Js code
function MENU() {
var MENUITEMS = document.getElementById('MENU')
MENUITEMS.innerHTML=" <a style='text-decoration:none;' href='OUR_WORKS.html'>OUR_WORKS</a><p class='LGND'>ABCD</p><button id='CLOSE'class='LGND' onclick='CLOSE()'>CLOSE_MENU</button>"
}
function CLOSE() {
var MENUITEMS = document.getElementById('MENU')
MENUITEMS.innerHTML=" <p onclick='MENU()' id='MENU'>MENU</p>"
}
Html code
<p onclick="MENU()" id="MENU"
>MENU</p>
Every time you click on the container #MENU, it will show the menu. The problem is that even when the menu is open, clicking on #MENU will show the menu. So clicking the "close" button will close the menu, then open it again.
One way you could fix this is by storing the state of the menu in a variable - like this:
var OPEN = false,
MENU_ELEM = document.getElementById("MENU");
function TOGGLEMENU(){
if(OPEN){
//menu is open, we need to close it
OPEN = false;
MENU_ELEM.innerHTML = "<p onclick='TOGGLEMENU()'>MENU</p>";
} else {
//menu is closed, we need to open it
OPEN = true;
MENU_ELEM.innerHTML = "<a style='text-decoration:none;' href='OUR_WORKS.html'>OUR_WORKS</a><p class='LGND'>ABCD</p><button id='CLOSE'class='LGND' onclick='TOGGLEMENU()'>CLOSE_MENU</button>";
}
}<div id="MENU"><p onclick="TOGGLEMENU()">Menu</p></div>See the example below.
A few suggestions:
p tag is not meant for a button. Use button element instead.innerHTML purely via JavaScript interferes with accessibility. Consider using static HTML markup and CSS styling to achieve the effect.const btn = document.querySelector('button');
const menu = document.querySelector('ul');
btn.addEventListener('click', toggle);
function toggle() {
menu.classList.toggle('active');
btn.classList.toggle('active');
}ul {
opacity: 0;
transform: translateX(-20px);
pointer-events: none;
transition: opacity .2s, transform .2s;
}
ul.active {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
button.active::after {
content: ' X';
}<button>MENU</button>
<ul>
<li>
<h2>Our Works</h2>
</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>