title: How do I hide and show an html page in order to make a simple menu?
body: <p>I'm trying to create a simple menu for an assignment, but I'm having trouble hiding the current menu page and show the one corresponding to the button clicked. How can i do that? I'm new to javascript.</p>
  
  <p>I have a button handler to deal with the click of the button that brings the new page. I have tried disabling the nav where all the elements are but that doesn't seem to work.</p>
  
  <pre><code>function main() {
    var ButtonSingle = document.getElementsId("UJOGADOR");
    ButtonSingle.addEventListener("click", btnSingleHandler);
  }
  
  function btnSingleHandler(ev) {
    var page = document.getElementsId("menu");
    page.disabled = true;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;main&gt;
          &lt;nav id = "menu"&gt;
              &lt;button id="UJOGADOR"&gt;&lt;img src="../resources/btn4.png"&gt;&lt;/button&gt;
          &lt;/nav&gt;
      &lt;/main&gt;
  
      &lt;audio loop&gt;
          &lt;source src=""&gt;
      &lt;/audio&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What is meant to happen is the current menu page is hidden and a new one will appear, but when i run this nothing happens.</p>