在 Javascript 中处理切换页面的正确命令行是什么

问：

我正在做一个课堂项目，我创建了一个应用程序，您可以通过单击图标导航到下一页，类似于应用程序的工作方式。当我单击主页图标两次时，它会将我带到不应该发生的第 2 页。我希望它在哪里，当你点击主页图标时，它会进入主页，当你点击搜索时，它会像应用程序一样进入搜索，但是当我点击图标 2 次时，它会显示另一个页面。我将添加一个视频，以便您可以看到它的实际效果以及共享我的代码。我是所有这些的新手，可能需要一些帮助。如果有人愿意直接给我发消息并提供帮助，我们将不胜感激。在此过程中，我可能会有一些问题。谢谢！

这是 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>

这是 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>

现在这是我认为搞砸了它的 javascript 代码

希望有人能找到它这样做的原因 我还尝试将if（statement）也做了同样的事情 这里还有一个视频 https://streamable.com/xx5fd9

我还尝试将if（statement）也做了同样的事情