How to hide my userInfo element

I want to hide my userInfo element before a user connect his/her wallet and i want it to show when the user click on Profile button.
Here is my main.js code below.

const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });

async function hide_buttons() {
    let user = await Moralis.User.current();
    if (!user) {
        document.getElementById("btnConnect").style.display = "block";
        document.getElementById("btnUserInfo").style.display = "none";
        document.getElementById("btnLogout").style.display = "none";
    } else {
        document.getElementById("btnConnect").style.display = "none";
        document.getElementById("btnUserInfo").style.display = "block";
        document.getElementById("btnLogout").style.display = "block";
    }
}

hide_buttons();

async function login() {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
        });
    }
    console.log("logged in user:", user);
    hide_buttons();
    const isWeb3Active = Moralis.ensureWeb3IsInstalled();

    if (isWeb3Active) {
        console.log("Activated");
    } else {
        async function enable() {
            await Moralis.enable();
        }
    }
}

async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
    hide_buttons();
}

async function openuserInfo() {
    user = await Moralis.user.current();
    if (user) {
        showElement(userInfo);
    } else {
        login();
    }
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;

const userConnectButton = document.getElementById("btnConnect");
const userProfileButton = document.getElementById("btnUserInfo");

const userInfo = document.getElementById("userInfo");

This is my html code below.

<!DOCTYPE html>
<html>
<!-- HEADER STARTS HERE -->

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32" />
    <link rel="apple-touch-icon" href="icon/favicon-32x32.png" />

    <meta name="description" content="MrGrandpa doge, Is the ORIGINAL OG of crypto.
    He is a smooth talking r&b singing 🎀 playboy,
    who believes that bitcoin is the most secure investment in the crypto universe,
    don't get him wrong he's a strong believer of doge coin as well." />
    <meta name="keywords" content="MrGrandPaDoge #MRBTC" />
    <meta name="Developer" content="Isaiah Fadakinte" />
    <meta name="Owner" content="Joey Duque" />
    <title>
        MrGrandpadoge NFT Marketplace | No 1 first Multi Network MarketPlace
    </title>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
</head>
<!-- HEADER STOPS HERE -->

<!-- BODY STARTS HERE -->

<body>
    <h1>MrGrandPaDoge NFT Marketplace</h1>

    <button id="btnConnect">Connect wallet</button>
    <button id="btnUserInfo">Profile</button>

    <! -- adding the UserInfo details like Email & username -->

    <div id="userInfo"></div>
    <h4>User Profile</h4>
    <input type="text" id="txtUsername" required placeholder="Enter username" />
    <input type="text" id="txtEmail" placeholder="Enter email" />
    <small>Optional</small>

    <! -- adding the avatar file -->

    <img src="" id="imgAvatar" alt="" />
    <label for="fileAvatar">Select Avatar</label>
    <input type="file" id="fileAvatar" />

    <button id="btnLogout">LogOut</button>
    <button id="btnCloseUserInfo">Close</button>
    <button id="btnSaveUserInfo">Save</button>

    <script src="js/main.js"></script>
</body>
<! --BODY ENDS HERE -->

</html>

You can add code to hide it and show it in this hide_buttons function, similar on how you did it with those buttons you can do it for user info too:
document.getElementById("userInfo").style.display = "none"; should hide it
and
document.getElementById("userInfo").style.display = "block"; should show it

Not working bro, i used the same method

I would expect it to work, can you paste the new code for hide_buttons function?

const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });

async function hide_buttons() {
    let user = await Moralis.User.current();
    if (!user) {
        document.getElementById("btnConnect").style.display = "block";
        document.getElementById("btnUserInfo").style.display = "none";
        document.getElementById("btnLogout").style.display = "none";
        document.getElementById("userInfo").style.display = "none";
    } else {
        document.getElementById("btnConnect").style.display = "none";
        document.getElementById("btnUserInfo").style.display = "block";
        document.getElementById("btnLogout").style.display = "block";
        document.getElementById("userInfo").style.display = "block";
    }
}

hide_buttons();

async function login() {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
        });
    }
    console.log("logged in user:", user);
    hide_buttons();
    const isWeb3Active = Moralis.ensureWeb3IsInstalled();

    if (isWeb3Active) {
        console.log("Activated");
    } else {
        async function enable() {
            await Moralis.enable();
        }
    }
}

async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
    hide_buttons();
}

async function openuserInfo() {
    user = await Moralis.user.current();
    if (user) {
        showElement(userInfo);
    } else {
        login();
    }
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;

Works perfectly fine for me.

You have one typo in openuserInfo() function

its Moralis.User.current() not Moralis.user.current().

i have corrected the typo yet it’s not working,

You will need to define showElement first.

function showElement(param) {
// your logic here
}

Should i add this code to the hide_button function?

No as a function itself.

First go through your mind and think of what do you want to display/show.
Then define the function properly and pass in your argument. In this case your arg is userInfo but I cannot really see from where you are getting userInfo .

Where do i need to add this code?

within the script tag

Can i send image so you can see what am facing?

1 Like

You can use this instead of that function


My User Profile is not hidden when i added this code below.

const serverUrl = "https://mzrhanzmogsu.moralishost.com:2053/server";
const appId = "gFnTLmvgt8ZDUYMXF80FIonsCRqosKxXcfzmO2bM";
Moralis.start({ serverUrl, appId });

async function hide_buttons() {
    let user = await Moralis.User.current();
    if (!user) {
        document.getElementById("btnConnect").style.display = "block";
        document.getElementById("btnUserInfo").style.display = "none";
        document.getElementById("btnLogout").style.display = "none";
        document.getElementById("userInfo").style.display = "none";
    } else {
        document.getElementById("btnConnect").style.display = "none";
        document.getElementById("btnUserInfo").style.display = "block";
        document.getElementById("btnLogout").style.display = "block";
        document.getElementById("userInfo").style.display = "block";
    }
}

hide_buttons();

async function login() {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Welcome to GrandPaDoge NFT MarketPlace",
        });
    }
    console.log("logged in user:", user);
    hide_buttons();
    const isWeb3Active = Moralis.ensureWeb3IsInstalled();

    if (isWeb3Active) {
        console.log("Activated");
    } else {
        async function enable() {
            await Moralis.enable();
        }
    }
}

async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
    hide_buttons();
}

async function openuserInfo() {
    user = await Moralis.User.current();
    if (user) {
        showElement("userInfo");
    } else {
        login();
    }
}

function showElement() {
    userInfo;
}

document.getElementById("btnConnect").onclick = login;
document.getElementById("btnLogout").onclick = logOut;
document.getElementById("btnUserInfo").onclick = openuserInfo;
document.getElementById("userInfo");

I use it but it is not hidden my User Profile, it’s only hide the Profile button

Ok let me ask you please. What should the function showElement do?

Getting the userInfo and displaying it? Or just make an element visible?

I am completely lost :grimacing:

Only an element visible is my assumption