Javascript CSS changing navigation visibility

For a project im working on i need to make sure that when a part of the app is being used a different secondary navigation is being shown. the code down below is the different navigations that i need to be shown but when i clock on the desired button my secondary navigation wont appear

Main NAV:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow">
    <div class="container-fluid">
        <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ProjectBumbo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-controller="Prognosis" asp-action="Index">Prognosis</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="Rooster" asp-controller="" asp-action="">Planning</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="" asp-action="">Uren registratie</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="" asp-action="">Medewerkers</a>
                </li>
            </ul>
            <partial name="_LoginPartial" />
        </div>
    </div>
</nav>

And when the Prognosis Link is clicked i need to make this navigation appear

<nav class="navbar navbar-expand-md" id="PrognosisNav" style="display:none;">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Prognosis" asp-action="Index">Prognose</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="ExpectationLoad" asp-action="Index">Klanten & Collie beheren</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Standardization" asp-action="Index">Normering beheren</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="StoreInfo" asp-action="Index">Winkel Informatie</a>
        </li>
    </ul>
</nav>

And when the Planning button is clicked i need to load in this nav

<nav class="navbar navbar-expand-md" id="RoosterNav" style="display:none;">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Rooster" asp-action="">Rooster overzicht</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Inroosteren</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Vervanging</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Verlof Verzoeken</a>
        </li>
    </ul>
</nav>

I tried using this Javascript Code but it won’t work

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const prognosisLink = document.querySelector('a[asp-controller="Prognosis"]');
        const prognosisNav = document.getElementById('PrognosisNav');
        const roosterLink = document.querySelector('a[asp-controller="Rooster"]');
        const roosterNav = document.getElementById('RoosterNav');

        prognosisLink.addEventListener('click', function (event) {
            event.preventDefault();
            prognosisNav.style.display = 'block';
            roosterNav.style.display = 'none';
        });

        roosterLink.addEventListener('click', function (event) {
            event.preventDefault();
            roosterNav.style.display = 'block';
            prognosisNav.style.display = 'none';
        });
    });
</script>