[SOLVED] Non-functioning input [ I CLONED RARABLE IN 24 HOURS pt2 ]

Following the Rarable/Moralis tutorial, i have completed part 2 but the input buttons have become inactive.
Upon completing part 1, everything was working until configuring the code to suit part 2 needs.

index.html

<!DOCTYPE html>

<html lang="en">

<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">

    <title>Morarables</title>

</head>

<body>

    <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="" id="ingAvatar" alt="">

        <label for="fileAvatar">Select 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/[email protected]/dist/web3.min.js"></script>

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

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

</body>

</html>

main.js

Moralis.initialize("---");

Moralis.serverURL = 'https://---/server'

init = async () => {

    hideElement(userInfo);

    await Moralis.enableWeb3();

        initUser();

}

initUser = async () => {

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

        hideElement(userConnectButton);

        showElement(userProfileButton);

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

    }

}

login = async () => {

    try {

        await Moralis.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();
1 Like

Here in your html, the ids aren’t wrapped in quotes properly

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

Here, it should be Moralis.start as Moralis.initialize is deprecated

const serverUrl = "";
const appId = "";
Moralis.start({ serverUrl, appId });

You also selected an element that doesn’t exist in the dom here, it should be "btnLogOut", not "btnLogout"

That worked! Thank you.

Just quickly, what difference does it make using

const serverUrl = "";
const appId = "";
Moralis.start({ serverUrl, appId });

over

Moralis.initialize("---");

Moralis.serverURL = 'https://---/server'

The code runs as intended using the original method anyway.

Moralis.initialize is a deprecated syntax https://docs.moralis.io/misc/troubleshooting#error-web3api-not-initialized-run-moralis.start-first

After changing to the deprecated syntax, some buttons have become nonfunctioning.
I have added more code following part 3 of the tutorial videos. Can you point out anything that is wrong here?
After pressing the Profile button, there is an uncaught ReferenceError:
Uncaught (in promise) ReferenceError: userUsernameField is not defined at HTMLButtonElement.openUserInfo

Current code

HTML:

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Morarables</title>
</head>
<body>
    <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 width="50" height="50" src="" id="imgAvatar" alt="">
        <label for="fileAvatar">Select 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/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="main.js"></script>
</body>
</html>

JavaScript:

const serverUrl = "https://-----:2053/server";

const appId = "-----";

Moralis.start({ serverUrl, appId });

init = async () => {

    hideElement(userInfo);

    await Moralis.enableWeb3();

        initUser();

}

initUser = async () => {

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

        hideElement(userConnectButton);

        showElement(userProfileButton);

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

    }

}

login = async () => {

    try {

        await Moralis.authenticate();

        initUser();

    } catch (error) {

        alert(error)

    }

}

logout = async () => {

    await Moralis.User.logOut();

    hideElement(userInfo);

    initUser();

}

openUserInfo = async () => {

    user = await Moralis.User.current();

    if (user){

        const email = user.get('email');

        if(email){

            userEmailField.value = email;

        }else{

            userEmailField.value = "";

        }

        userUsernameField.value = user.get('username');

       

        const userAvatar = user.get('avatar');

        if(userAvatar){

            userAvatarImg.src = userAvatar.url();

            showElement(userAvatarImg);

        }else{

            hideElement(userAvatarImg);

        }

        showElement(userInfo);

    }else{

        login();

    }

}

saveUserInfo = async () => {

    user.set('email', userEmailField.value);

    user.set('username', userUsernameField.value);

    if (userAvatarFile.isDefaultNamespace.length > 0) {

        const avatar = new Moralis.File("avatar.jpg", userAvatarFiles[0]);

        user.set('avatar', avatar);

    }

    await user.save();

    alert("User info saved successfully!");

    openUserInfo();

}

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

const userNameField = document.getElementById("txtUsername");

const userEmailField = document.getElementById("txtEmail");

const userAvatarImg = document.getElementById("imgAvatar");

const userAvatarFile = document.getElementById("fileAvatar");

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

document.getElementById("btnLogOut").onclick = logout;

document.getElementById("btnSaveUserInfo").onclick = saveUserInfo;

init();

Should be userNameField, not userUsernameField