页面加载时用JS隐藏div的代码问题排查

问题背景 #

需要根据用户登录状态展示对应菜单：未登录用户显示「Zaloguj（登录）」，已登录用户显示「Wyloguj（退出）」，期望页面加载时自动执行切换逻辑，但现有代码无法正常生效。

原HTML代码 #

<div>
  <div id="non_loggedIn" style="display:block">
    Baza wiedzy - 1
  </div>

  <div id="loggedIn" style="display:block">
    Baza wiedzy - 2
  </div>

  <div id="login-status">
    Zaloguj
  </div>
</div>

原JS代码 #

window.onload = function() {
  var loginStatus = document.getElementById('login-status').innerText;
  var loggedIn = document.getElementById('loggedIn').style.display;
  var non_loggedIn = document.getElementById('non_loggedIn').style.display;


  console.log('loggedIn: ' + loggedIn);
  console.log('non-loggedIn: ' + non_loggedIn);
  console.log('loginStatus: ' + loginStatus);

  if (loginStatus == 'Zaloguj') {
    loggedIn = 'block'
    non_loggedIn = 'none'

  } else {
    loggedIn = 'none'
    non_loggedIn = 'block'
  }
  
   console.log('loggedIn: ' + loggedIn);
  console.log('non-loggedIn: ' + non_loggedIn);
  console.log('loginStatus: ' + loginStatus);
}

问题排查 #

1. DOM属性未更新：原代码仅修改了loggedIn和non_loggedIn变量的取值，但没有将新值赋值回DOM元素的style.display属性，导致页面元素的显示状态不会发生变化。
2. 逻辑判断颠倒：当loginStatus为「Zaloguj（登录）」时，代表用户未登录，此时应该显示未登录菜单（non_loggedIn）、隐藏已登录菜单（loggedIn），但原代码的逻辑完全相反。

修复后的代码 #

修正后的JS代码 #

window.onload = function() {
  // 保存DOM元素引用，方便后续操作
  const loginStatusEl = document.getElementById('login-status');
  const loggedInEl = document.getElementById('loggedIn');
  const nonLoggedInEl = document.getElementById('non_loggedIn');
  
  const loginStatus = loginStatusEl.innerText.trim(); // 去除文本首尾空白，避免判断出错

  console.log('当前登录状态文本:', loginStatus);

  if (loginStatus === 'Zaloguj') {
    // 未登录：显示未登录菜单，隐藏已登录菜单
    loggedInEl.style.display = 'none';
    nonLoggedInEl.style.display = 'block';
  } else {
    // 已登录：显示已登录菜单，隐藏未登录菜单
    loggedInEl.style.display = 'block';
    nonLoggedInEl.style.display = 'none';
    // 同时将登录状态文本改为退出
    loginStatusEl.innerText = 'Wyloguj';
  }
}

修复说明 #

• 直接保存DOM元素引用，避免重复查询DOM，提升性能的同时方便修改属性
• 使用trim()处理登录状态文本，避免因文本首尾空格导致判断失效
• 修正逻辑判断，确保登录状态与菜单显示对应
• 将修改后的display值直接赋值给DOM元素的style.display属性，真正改变页面元素的显示状态
• 补充了已登录时将状态文本改为「Wyloguj（退出）」的逻辑，符合需求描述

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