Javascript to toggle between grids

I have created 3 DIVs using grid layout.
I have a Navigation bar, with an on-click event
When the nav-bar button is clicked I need the Javascript to show the grid associated with the button.

At the moment when i click the button all grid elements are hidden. The areaName passed in the function doesnt get unhidden.

        function openArea(areaName) {
            var i;
            var x = document.getElementsByClassName("Function");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            document.getElementById(areaName).style.display = "grid";
        }

        <body>
        <div class="nav-bar">
            <button class="area" onclick="openArea(event,'ABC')">ABC Tab</button>
            <button class="area" onclick="openArea(event,'XYZ')">XYZ Tab</button>
            <button class="area" onclick="openArea(event,'PRP')">PRP Tab</button>
        </div>


        <div id="ABC" class="Function" style="display: grid;
        grid-template-columns: 250px 250px 250px 250px;
        grid-template-rows: 250px 250px;">
            <div>This is the ABC section</div>
            <div>This is the ABC section</div>
            <div>This is the ABC section</div>
            <div>This is the ABC section</div>
        </div>


        <div id ="XYZ" class="Function" style="display: grid;
            grid-template-columns: 250px 250px 250px 250px;
            grid-template-rows: 250px 250px;
            display:none">
            <div class="tile1">Title1</div>
            <div class="tile2">Title2</div>
            <div class="tile3">Title3</div>
            <div class="tile4">Title4</div>
        </div>

        <div id="PRP" class="Function" style="display: grid;
        grid-template-columns: 250px 250px 250px 250px;
        grid-template-rows: 250px 250px;
        display:none">
            <div>This is the PRP section</div>
            <div>This is the PRP section</div>
            <div>This is the PRP section</div>
            <div>This is the PRP section</div>
        </div>
        </body>

Solution

In your HTML for the onClick event, you are giving two parameters and in the function's declaration, you only accept one. Also, you are trying to get an element with the getElementById method but you are not providing an id, you are giving it the event.

This is easily fixable by adding a second parameter in your function's declaration, and adding that parameter in the getElementById method since you are already sending the name of the id from the onClick property in your HTML. I gave it "temp" as a name, but you can name it however you want. Here's the code for it:

function openArea(areaName, temp) {
            var i;
            var x = document.getElementsByClassName("Function");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            document.getElementById(temp).style.display ="grid";
}