document.getElementById(“”)。style.display ='none';不管用

时间:2019-12-16 14:03:06

标签: javascript html css firebase firebase-authentication

我正在尝试在用户登录时隐藏此登录/注册导航元素,但它将无法正常工作。

<nav id="nav">
    <ul>
        <li><a href="index.html">Home</a>
            <ul>
                <li><a href="#banner" class="scrolly">Who are we</a></li>
                <li><a href="#main" class="scrolly">Our Events</a></li>
                <li><a href="#features" class="scrolly">Our Story</a></li>
                <li><a href="#footer" class="scrolly">Contact Us</a></li>
            </ul>
        </li>
        <li><a>Events</a>
            <ul>
                <li><a href="CurrentEvents.html" class="scrolly">Current Events</a></li>
                <li><a href="#main" class="scrolly" id = "myevents">My Events</a></li>
            </ul>
        </li>
        <li><a>Account</a>
            <ul>
                <li id = "Login/Register"><a href="LoginRegister.html" class="scrolly">Login/Register</a></li> 
                <li><a href="LoginRegister.html" class="scrolly" id = "userLoggedIn ">Abdalla</a></li>
                <li><a href="#footer" class="scrolly">Settings</a></li>
                <li id = "logout" onclick="logout()">Log out</li>
            </ul>
        </li>                       
    </ul>
</nav>

JS:

firebase.auth().onAuthStateChanged(function(user) {

    if (user) {
      document.getElementById("Login/Register").style.display='none';
    } else {
      document.getElementById("logout").style.display="none";
    }
  }
);

该函数被正确调用,我对其进行了测试并 我尝试隐藏其他随机元素(例如标头),但它确实有效。它只是无法与这些nav元素一起使用。我尝试了其他方法,也尝试了jQuery,尝试移除了整个元素,但没有任何反应。它没有返回NULL,它没有给我一个错误,但是它根本不起作用。难道我做错了什么?另外,这是用户登录时做事的正确方法吗?只是为了隐藏某些元素?还是有更好的方法来做到这一点我是Web开发人员的新手,我不确定这是否是最佳方法,因此我愿意征求建议。

1 个答案:

答案 0 :(得分:0)

  

当用户处于以下状态时,我正在尝试隐藏此登录/注册导航元素   登录,但无法正常工作。

确定要不要

 firebase.auth().onAuthStateChanged(function(user) {
   if (!user) {
     document.getElementById("Login/Register").style.display = '';
     document.getElementById("logout").style.display = "none";
   } else {
     document.getElementById("Login/Register").style.display = 'none';
     document.getElementById("logout").style.display = "";
   }
 });