我在头文件（index.html文件）中有以下部分：

<div class="rightsidetext">
    <div class="usernameDisplay" style="display: none;"></div>
    <div class="loginbutton" id="signOutButton" style="display: none;">
        <a href="#">Sign Out</a>
    </div>
    <div class="loginbutton"><a href="signin.html">Sign in</a></div>
    <div class="loginbutton"><a href="Login.html">Log in</a></div>
</div>

字符串
当网站加载的第一次，登录和登录按钮显示。用户登录后，我希望这两个按钮将被替换为各自的用户名和注销按钮。
在链接到index.html的js文件（replaceWithUsername.js）中，我有：

document.addEventListener('DOMContentLoaded', () => {
    const usernameDisplay = document.querySelector('.usernameDisplay');
    const signOutButton = document.getElementById('signOutButton');
    const signInButton = document.querySelector('.loginbutton a[href="signin.html"]');
    const loginButton = document.querySelector('.loginbutton a[href="Login.html"]');
  
    // Retrieve username from localStorage
    const username = localStorage.getItem('username');
  
    if (username) {
      // Show username and sign out button
      usernameDisplay.textContent = username;
      usernameDisplay.style.display = 'block';
      signOutButton.style.display = 'block';
  
      // Hide sign-in and log-in buttons
      signInButton.style.display = 'none';
      loginButton.style.display = 'none';
    } else {
      console.log('No username found');
    }
});

型
在signin.html的末尾，我有：

<script>
        document.addEventListener('DOMContentLoaded', function() {
          const inputField = document.getElementById('wantedSpace');
      
          // Listen for changes in the input field
          inputField.addEventListener('input', function(event) {
            const username = event.target.value; // Get the value entered by the user
      
            if (response.status == 200) {
              console.log('Username found:', username);
      
              // Set username in localStorage
              localStorage.setItem('isLoggedIn', true);
              localStorage.setItem('username', username);
      
              // Redirect to index.html
              window.location.href = '/allPages/index.html';
            } else {
              console.error('Login failed. Please try again.');
            }
          });
        });
</script>

型
用户放置其用户名的HTML是：

<input type="text" name="usernameOrEmail" placeholder="Username or Email" class="login_page_input" id="wantedSpace">

型
此外，我还有登录路由（在node.js中，它连接到一个mongoDB电池）：

app.post('/login', async (req, res) => {
  const { usernameOrEmail, password } = req.body;

  try {
      // Find user by username or email
      const user = await User.findOne({ $or: [{ username: usernameOrEmail }, { email: usernameOrEmail }] });

      if (!user) {
          return res.status(404).redirect('/allPages/registration_feedback/sign_in_feedback/userNotFound.html');
      }

      // Compare entered password with hashed password
      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
          return res.status(401).redirect('/allPages/registration_feedback/sign_in_feedback/incorrectPassword.html');
      }

      console.log('Loged in user:', user);

      const token = generateToken(user);

      return res.status(200).redirect('/allPages/index.html');
  } catch (err) {
      console.error('Login error:', err);
      return res.status(500).json({ error: 'Login failed. Please try again.' });
  }
});

型
在我登录一个用户后，在VSC终端中我确实得到了该用户的坐标，但在浏览器中导航栏保持不变（有登录和登录按钮，没有ussername），并且在控制台中显示以下消息：
第一个月
如何使用户名显示在页面上？