Issue with JS refreshing

[rexelardo]

I am only at episode 2 of the Youtube tutorial, and already many problems happening. Unsure why the ‘initUser’ works one way, but not another. Then when I click on ‘Profile’ later on, nothing displays.

Here is the JS code:
‘’’
Moralis.initialize(“3IcvId63X3g2jWHA2t2OCOFDHmfOw3PbF9etB6Mt”);

Moralis.serverURL = ‘https://k8lq9f7lkimp.moralis.io:2053/server’

init = async () => {

hideElement(userInfo);

window.web3 = await Morialis.web3.enable(); 

initUser();

}

initUser = async () => {

if (await Moralis.User.current()){

    hideElement(userConnectButton);

    showElement(userProfileButton);

}else{

    showElement(userConnectButton);

    hideElement(userProfileButton);

}

}

login = async () => {

try {

    await Moralis.Web3.authenticate();

    initUser();

} catch (error) {

    alert(error)

}

}

logout = async () => {

await Moralis.user.logOut();

hideElement(userInfo);

initUser();

}

OpenUserInfo = async() =>{

user = await Moralis.user.current();

if (user){

    showElement(userInfo)

}else{

    login();

}

}

hideElement = (element) => element.style.display = ‘none’;

showElement = (element) => element.style.display = ‘block’;

const userConnectButton = document.getElementById(‘btnConnect’);

userConnectButton.onclick = login;

const userProfileButton = document.getElementById(‘btnUserInfo’);

userProfileButton.onclick = OpenUserInfo;

const userInfo = document.getElementById(‘userInfo’);

document.getElementById(‘btnCloseUserInfo’).onclick = () => hideElement(userInfo);

document.getElementById(‘btnLogout’).onclick = logout;

init();
‘’’

Here is the HTML code:
‘’’

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Latin Ark</title>

<div>

    <button id='btnConnect'>Connect Wallet</button>

    <button id='btnUserInfo'>Profile</button>

</div>

<div id='userInfo'>

    <h4>User Profile</h4>

    <input type='text' id='txtUsername' required placeholder="Enter Username">

    <input type='text' id='txtEmail' placeholder="Enter Email">

    <small>Optional</small>

    <img src="" alt="" id="imgAvatar">

    <label for='fileAvatar'>Select your avatar</label>

    <input type='file' id='fileAvatar'>

    <button id='btnLogout'>Log Out</button>

    <button id='btnCloseUserInfo'>Close</button>

    <button id='btnSaveUserInfo'>Save</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

<script src="main.js"></script>

'''

Do I need to install a package or something in order to make this work? Any/all help is appreciated!

[thecil]

Hey @rexelardo, hope you are great.

@rexelardo

init = async () => {
hideElement(userInfo);
window.web3 = await Morialis.web3.enable(); 
initUser();

}

You have few typos errors in your code, here for example it should be:

window.web3 = await Moralis.Web3.enable();

@rexelardo

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

There it should be Moralis.User.current(), instead of Moralis.user.current()

There is the same error somewhere in the code, I just use the Find/Replace All function from Atom (ctrl+f).

After those fix, your code should work properly (it works for me )

Carlos Z

[rexelardo]

Great! Thanks for the help!
So, when is capitalization important? for ‘user.get’ should it be ‘User.get’?

[rexelardo]

I figured it out! No need for capitalization here because we call the variable ‘user’ before

[rexelardo]

Hello,
So I deployed what I have so far on Netlify:
https://priceless-cori-b22c44.netlify.app/
And indeed for some reason there are still issues. I changed the 3 typos you spoke about,but the ‘hideElement’ function does not work for some reason

[rexelardo]

OK the error I get when I click the button is that ‘UserUsernameField’ is not defined, so I changed the userUser const to userUsernameField const will check if it works

[rexelardo]

IT WORKS! Thanks for all of the help!