JavaScript - Hide button if user Logged/Not Logged

Question

I am fairly new to JavaScript and this is what I came up for hiding buttons depending if an user is logged or not. The navbar ids are correct but it does nothing with it.

function hideHeaderOptions() {
    let headerUploadPicture = document.getElementById("navbar-upload-picture");
    let headerProfile = document.getElementById("navbar-profile");
    let headerMessages = document.getElementById("navbar-messages");
    let headerResults = document.getElementById("navbar-results");
    let headerLogout = document.getElementById("navbar-logout");
    let headerLogin = document.getElementById("navbar-login");

    if (sessionManager.isLogged()) {
        headerLogin.style.display = "hidden";
    } else {
        headerUploadPicture.style.display = "hidden";
        headerProfile.style.display = "hidden";
        headerMessages.style.display = "hidden";
        headerLogout.style.display = "hidden";
        headerResults.style.display = "hidden";
    }
}

See: [What is the difference between visibility:hidden and display:none?](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) with +1300 up votes. — Yogi, May 26 '22 at 11:41

Sumit Sharma · Answer 1 · 2022-05-26T11:41:25.663

2

You can use none instead of hidden here:

     function hideHeaderOptions() {
    
        if (sessionManager.isLogged()) {
            document.getElementById("navbar-login").style.display = "none";
        } else {
            document.getElementById("navbar-upload-picture").style.display = "none";
            document.getElementById("navbar-profile").style.display = "none";
            document.getElementById("navbar-messages").style.display = "none";
            document.getElementById("navbar-logout").style.display = "none";
            document.getElementById("navbar-results").style.display = "none;
       }
}

edited May 26 '22 at 11:41

answered May 26 '22 at 11:39

Sumit Sharma

1,192
1
4
18

See: [Do not use the comment sections to encourage or otherwise nudge users towards accepting answers or voting, as the site functionality covers this today.](https://meta.stackoverflow.com/questions/251288/dealing-with-an-answer-that-wasnt-accepted-maybe-because-a-user-is-a-newbie-on/417578#417578) – Yogi May 26 '22 at 11:46
@Yogi Ok Bhai.. – Sumit Sharma May 26 '22 at 11:55
Just to add, it would be a better practice for OP to add and remove the ```hidden``` attribute to the element rather than do an inline style change. That, or create a helper class with just ```display: none``` in it and then apply that class to the elements. The ```hidden``` attribute is what you really want to do though unless there is some other ```display``` property like ```display: flex``` on the element. It is supported by all browsers. – Stephen M Irving May 26 '22 at 22:01

JavaScript - Hide button if user Logged/Not Logged

1 Answers1