document.getElementById("").style.display='none'; is not working

Question

I am trying to hide this login/register nav element when the user is logged in but it won't work.

<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";
    }
  }
);

The function is getting called correctly, I tested it and I tried hiding other random elements such as the header and it worked. It just simply won't work with these nav elements. I tried other methods, I tried jQuery too, I tried removing the entire element and nothing happens. It's not returning NULL, its not giving me an error, but it simply won't work. Am I doing something wrong? Also, is this the proper way to do things when the user is logged in? just to hide certain elements? or is there a better way to do it. I am new to web dev and I am not sure whether this is the optimal way, so I'm open for suggestions.

Answer 1

I am trying to hide this login/register nav element when the user is logged in but it won't work.

Are you sure you don't want this

 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 = "";
   }
 });