封装登录态导航栏函数后导航栏消失的问题求助

我尝试通过if语句实现根据用户登录状态切换不同导航栏的功能，但遇到问题：将导航栏渲染逻辑封装进函数并调用后，导航栏完全不显示；而将该逻辑移出函数直接执行时，导航栏可正常显示。

说明：我知晓不应在JavaScript中硬编码账号密码，这是课程作业，不会实际投入使用。

HTML代码 #

<!DOCTYPE html>
<html lang="en" id="html-login">
<head>
  <link rel="stylesheet" href="../css/stylesheet.css">
  <link rel="icon" type="image/x-icon" href="../img/graphic-card.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <meta charset="UTF-8">
  <title>Graphics Center</title>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  <script defer src="../js/login-page.js"></script>
</head>
<body>
<!-- Logo -->
  <img id="logo" src="../img/logo.png" alt="Graphics Center">
  <h1 id="tagline">We're like Toys R Us but for Graphics Cards enthusiasts!</h1>

<!-- Nav Bar made in JavaScript -->
  <nav></nav>

<!-- Login -->
  <article>
    <main id="main-holder">
      <h1 id="login-header">Login</h1>
      <div id="login-error-msg-holder">
        <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
      </div>

      <form id="login-form">
        <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
        <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
        <input type="submit" value="Login" id="login-form-submit">
      </form>

    </main>
  </article>
</body>
<footer>
  <!-- Copyright info -->
  <p>Graphics Center © All rights reserved. </p>

  <!-- Time and date -->
  <p id="p1"></p>
  <script>var date = new Date();
  document.getElementById("p1").innerHTML = date;</script>

  <!-- Link to gpu icon I used -->
  <a href="https://www.flaticon.com/free-icons/gpu" title="gpu icons">Gpu icons created by smashingstocks - Flaticon</a>
  <script src="../js/nav.js"></script>
</footer>
</html>

JavaScript代码 #

nav.js #

// 获取当前URL路径
const path = window.location.pathname

const navBarNotLoggedIn= `
   <ul id="nav">
    <li class="navli"><a class="navA" href="../view/index.html">Home</a></li>
    <li class="navli"><a class="navA" href="#">Products</a></li>
    <li class="navli" style="float:right"><a class="navA" href="login.html">Login!</a></li>
   </ul>`

const navBarLoggedIn= `
   <ul id="nav">
    <li class="navli"><a class="navA" href="../view/index.html">Home</a></li>
    <li class="navli"><a class="navA" href="#">Products</a></li>
    <li class="navli" style="float:right"><a class="navA" href="#">Logged in!</a></li>
   </ul>`

function checkLogin() {
    // 判断登录状态并渲染对应导航栏
    if (localStorage.getItem("LoggedIn") == "true") {
        document.querySelector("nav").insertAdjacentHTML("afterbegin", navBarLoggedIn);
    } else {
        document.querySelector("nav").insertAdjacentHTML("afterbegin", navBarNotLoggedIn);
    }
    // 给当前页面导航项添加active类（需在导航栏渲染后执行）
    const activeLink = document.querySelector(`[href='${path}']`);
    if (activeLink) {
        activeLink.classList.add('active');
    }
}

// 修复事件绑定：使用正确的页面加载事件触发函数
window.addEventListener('load', checkLogin);

login-page.js #

const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");

loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    const username = loginForm.username.value;
    const password = loginForm.password.value;

    if (username === "user" && password === "web_dev") {
        alert(greetingResult);
        // 正确更新localStorage的登录状态
        localStorage.setItem("LoggedIn", "true");
        location.reload();
    } else {
        // 登录失败时重置登录状态
        localStorage.setItem("LoggedIn", "false");
        loginErrorMsg.style.opacity = 1;
    }
})

const greetings = [
    "Welcome!"
    , "You've logged in!!"
    , "Jody sucks! but you've logged in!"
    , "Logging you out now...jk!"
    , "Pepsi sucks! but you've logged in"
    , "Welcome to Toy's R U- I mean Graphics Center!"
];
const greeting_id = Math.floor(Math.random() * greetings.length);
var greetingResult = greetings[greeting_id];

1. 事件绑定错误：原代码用document.load(checkLogin)是无效写法，改为window.addEventListener('load', checkLogin)确保页面加载完成后执行导航栏渲染函数。
2. LocalStorage操作错误：原代码中LoggedIn = true没有实际更新localStorage，改为直接调用localStorage.setItem("LoggedIn", "true")同步登录状态；同时localStorage只能存储字符串，统一用字符串值判断状态。
3. Active类添加时机错误：原代码在导航栏渲染前就尝试查找导航项，导致找不到元素报错，将添加active类的逻辑移到checkLogin函数内部，确保导航栏渲染后再执行。

内容的提问来源于stack exchange，提问作者PotterPlays