Html – What is the right command-line to deal with switching pages in Javascript

I’m working on a class project, and I’ve created an app where you can navigate to the next page by clicking on an icon, similar to how apps work. When I click the home icon twice, it takes me to page 2 which shouldnt happen.I want it to where when you click on home icon it goes to the home and whenyou click on the search is goes to the search like a app but when i click on the icons 2 times it shows another page. I’ll be adding a video so you can see it in action along with sharing my code. I’m new to all of this and could use some help. If anyone is willing to direct message me and offer assistance, that would be greatly appreciated. I might have some questions along the way. Thanks!

here is the html

<!-- Icons at the bottom for navigation -->
<div class="bottom-container">
    <div class="bottom-icons">
        <div class="icon" onclick="showHomePage()">
            <img src="images/homepagepng.png" alt="Home Icon" class="icon1-img" />
        </div>
        <div class="icon" onclick="showSearchPage()">
            <img src="images/searchpng.png" alt="Search Icon" class="icon1-img" />
        </div>
        <div class="icon" onclick="showPostPage()">
            <img src="images/post.png" alt="Post Icon" class="icon1-img" />
        </div>
        <div class="icon" onclick="showNotificationsPage()">
            <img src="images/notificationpng.png" alt="Notifications Icon" class="icon1-img" />
        </div>
    </div>
</div>
        </div>
    </div>
</div>
 
<!-- Search Page -->
<div class="app" id="search-content" style="display: none;">
    <div class="app-wrapper">
        <div class="header">
            <div class="subtitle">Search your favorite creators</div>p
            <div class="bottom-container">
                <div class="bottom-icons">
                    <div class="icon" onclick="showHomePage()">
                        <img src="images/homepagepng.png" alt="Home Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showSearchPage()">
                        <img src="images/searchpng.png" alt="Search Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showPostPage()">
                        <img src="images/post.png" alt="Post Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showNotificationsPage()">
                        <img src="images/notificationpng.png" alt="Notifications Icon" class="icon1-img" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<!-- Post Page -->
<div class="app" id="post-content" style="display: none;">
    <div class="app-wrapper">
        <div class="header">
            <div class="subtitle">Posting Page</div>
            <div class="bottom-container">
                <div class="bottom-icons">
                    <div class="icon" onclick="showHomePage()">
                        <img src="images/homepagepng.png" alt="Home Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showSearchPage()">
                        <img src="images/searchpng.png" alt="Search Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showPostPage()">
                        <img src="images/post.png" alt="Post Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showNotificationsPage()">
                        <img src="images/notificationpng.png" alt="Notifications Icon" class="icon1-img" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<!-- Notifications Page -->
<div class="app" id="notifications-content" style="display: none;">
    <div class="app-wrapper">
        <div class="header">
            <div class="subtitle">Notifications Page</div>
            <div class="bottom-container">
                <div class="bottom-icons">
                    <div class="icon" onclick="showHomePage()">
                        <img src="images/homepagepng.png" alt="Home Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showSearchPage()">
                        <img src="images/searchpng.png" alt="Search Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showPostPage()">
                        <img src="images/post.png" alt="Post Icon" class="icon1-img" />
                    </div>
                    <div class="icon" onclick="showNotificationsPage()">
                        <img src="images/notificationpng.png" alt="Notifications Icon" class="icon1-img" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

here is the Js

<script>
    var currentPageId = '';
    
    function switchPage(pageId) {
    if (currentPageId !== pageId) {
    var pages = document.getElementsByClassName('app');
    for (var i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
    }
    
    var selectedPage = document.getElementById(pageId);
    if(statment) {
    selectedPage.style.display = 'flex';
    currentPageId = pageId;
    }
    }
    }
    
    function showHomePage() {
    switchPage('home-content');
    }
    
    function showSearchPage() {
    switchPage('search-content');
    }
    
    function showPostPage() {
    switchPage('post-content');
    }
    
    function showNotificationsPage() {
    switchPage('notifications-content');
    }
    
    function submitPost() {
    alert("Post submitted!");
    showHomePage();
    }
    </script>

Now this is the javascript code that i think is messing it up

hopefully someone can find why its doing this
also i tried putting if(statement) also still did the same thing
also here a video https://streamable.com/xx5fd9

also i tried putting if(statement) also still did the same thing