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>

CodePudding user response：

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>

CodePudding user response：

See the example below.

A few suggestions:

• p tag is not meant for a button. Use button element instead.
• Swapping out 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>