When i click on menu button it open menu but when i click close button its not closing it

Question

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>

Answer 1

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>