How do I hide and show an html page in order to make a simple menu?

Question

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.

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.

function main() {
  var ButtonSingle = document.getElementsId("UJOGADOR");
  ButtonSingle.addEventListener("click", btnSingleHandler);
}

function btnSingleHandler(ev) {
  var page = document.getElementsId("menu");
  page.disabled = true;
}

html:

<body>
    <main>
        <nav id = "menu">
            <button id="UJOGADOR"><img src="../resources/btn4.png"></button>
        </nav>
    </main>

    <audio loop>
        <source src="">
    </audio>
</body>

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.

Possible duplicate of [How do you create a hidden div that doesn't create a line break or horizontal space?](https://stackoverflow.com/questions/1992114/how-do-you-create-a-hidden-div-that-doesnt-create-a-line-break-or-horizontal-sp) — Mitch, May 10 '19 at 17:44
Your `btnSingleHandler(ev)` takes an argument and you do nothing with it? — Elroy Jetson, May 10 '19 at 17:47

score 0 · Answer 1 · answered May 10 '19 at 17:57

I see two things.

1) getElementsId is not a function. You probably meant getElementById

    var ButtonSingle = document.getElementById("UJOGADOR");

2) If you are trying to hide an HTML element you can set its CSS properties to display: none. You can do this by dynamically changing the class, or using a function like you already trying to do.

    function btnSingleHandler(ev){
        var page = document.getElementById("menu");
        page.style.display = "none";
    }

Something like that should work, as long as you properly set up your event listeners to the button.

score 0 · Answer 2 · answered May 10 '19 at 18:10

First of all, there's no function named getElementsId. You should use:

var page = document.getElementById("menu");

Showing and hiding elements in a document is a common task. To hide any element, you can give it a display:none style:

myElement.style.display = "none";

To show a hidden element, give it one of the visible styles:

myElement.style.display = "block";
myElement.style.display = "inline";
myElement.style.display = "inline-block";

How do I hide and show an html page in order to make a simple menu?

2 Answers2