JS登录跳转页面后出现null属性错误 求页面切换建议

核心思路 #

把登录界面和应用界面放在同一个HTML文件中，通过CSS控制元素的显示/隐藏状态，搭配JavaScript完成界面切换逻辑，同时用本地存储（localStorage）保存登录状态，实现页面刷新后的状态记忆。

具体实现步骤 #

1. HTML结构 #

将两个界面的DOM节点写在同一文件内，分别给容器添加类名用于控制显示，默认隐藏应用界面：

<div class="login-container">
  <input type="text" id="nicknameInput" placeholder="输入昵称">
  <button id="goBtn">let's go</button>
</div>

<div class="app-container" style="display: none;">
  <!-- 应用界面内容 -->
  <h2>欢迎回来，<span id="userName"></span>！</h2>
  <button id="logoutBtn">退出登录</button>
</div>

2. 基础样式（可选） #

给容器添加简单样式，优化界面布局：

.login-container, .app-container {
  padding: 20px;
  max-width: 400px;
  margin: 50px auto;
  border: 1px solid #eee;
  border-radius: 8px;
}

3. JavaScript逻辑 #

• 页面加载时优先检查本地存储的登录状态，直接匹配对应界面
• 登录按钮点击时验证昵称（这里做非空判断），保存状态后切换界面
• 退出按钮点击时清除存储，切回登录界面

// 获取DOM元素
const loginContainer = document.querySelector('.login-container');
const appContainer = document.querySelector('.app-container');
const nicknameInput = document.getElementById('nicknameInput');
const goBtn = document.getElementById('goBtn');
const logoutBtn = document.getElementById('logoutBtn');
const userNameSpan = document.getElementById('userName');

// 页面初始化检查登录状态
function initPage() {
  const savedNickname = localStorage.getItem('nickname');
  savedNickname ? showAppPage(savedNickname) : showLoginPage();
}

// 切换到登录页面
function showLoginPage() {
  loginContainer.style.display = 'block';
  appContainer.style.display = 'none';
  nicknameInput.value = '';
}

// 切换到应用页面
function showAppPage(nickname) {
  loginContainer.style.display = 'none';
  appContainer.style.display = 'block';
  userNameSpan.textContent = nickname;
}

// 登录按钮点击事件
goBtn.addEventListener('click', () => {
  const nickname = nicknameInput.value.trim();
  if (nickname) {
    localStorage.setItem('nickname', nickname);
    showAppPage(nickname);
  } else {
    alert('请输入昵称');
  }
});

// 退出登录按钮点击事件
logoutBtn.addEventListener('click', () => {
  localStorage.removeItem('nickname');
  showLoginPage();
});

// 初始化页面
initPage();

新手实用提示 #

• 避免null错误：单文件内所有DOM元素都存在于当前页面，不会出现跨页面引用不存在元素导致的null报错
• DOM操作时机：把JS代码放在HTML末尾，或者用DOMContentLoaded事件包裹，确保DOM加载完成后再获取元素，避免获取到null
• 状态控制灵活度：如果不需要持久化登录状态，可替换localStorage为全局变量，但刷新页面后状态会丢失
• 调试技巧：遇到问题按F12打开控制台，查看报错信息定位问题，比如元素获取失败会明确显示null
• 验证扩展：可根据需求添加昵称长度、特殊字符过滤等验证规则

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