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

Moralis General
#1

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/web3@latest/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
#2

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"

#3

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.

#4

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

#5

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/web3@latest/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();
#6

Should be userNameField, not userUsernameField