Rarible Clone Episode 2

I have been trying to follow along with the tutorial on cloning Rarible. I have finished the second video and am having some issues. When I live run the code or run to local host on python, none of the buttons work on the page. I have been watching the video closely and am coding along line by line. The functions look ok, but I am not sure whether Moralis commands have changed since the video was made. The code is still in early stages and is simple. I will attach it here:
js file:

Moralis.initialize("HeHrsBPQ5Tm2CvW7fg9UUQ6vRNH08QSE2PGfZ7RP");

Moralis.serverURL = 'https://ramidym6kdlp.grandmoralis.com:2053/server'

init = async() => {

    hideElement(userInfo);

    window.web3 = await Moralis.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();

html file:

<!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>Document</title>

</head>

<body>

    <div>

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

        <button id="btnProfile">Profile</button>

    </div>

    <div>

        <h4>User Profile</h4>

        <input type="text" id="textUsername" required placeholder="Enter username">

        <input type="text" id="textEmail" required placeholder="Enter email">

        <small>Optional</small>

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

    </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="main2.js"></script>  

</body>

</html>

You can read here how to post code: READ BEFORE POSTING - How to post code in the forum

what error do you see in your browser console?

Thank you for the reply, I will attempt to edit the original post.

I get this error when the page loads originally:

Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)

No errors when I click the buttons.

unrelated, you’ll have to replace those two lines with:
Moralis.start({ serverUrl: "https://ramidym6kdlp.grandmoralis.com:2053/server", appId: "HeHrsBPQ5Tm2CvW7fg9UUQ6vRNH08QSE2PGfZ7RP" });

Ok I have changed that. Now in the console, this error appears.
Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘style’)
at hideElement (main2.js:43)
at init (main2.js:5)
at main2.js:55

Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘style’) at hideElement (main2.js:43)
You’ll have to look in main2.js at line 43 and see what it tires to hide, and why it is null there.

These are the 3 lines it points to 43, 5 and 55, respectively. Isn’t this to define the command hideElement?


hideElement = (element) => element.style.display = "none";

hideElement(userInfo);

init();

what is userInfo there? with what it was initialised?

In the video, he initializes it at line 52. I just changed it to initialize at line 3 before it is first used in a function and I still get the same errors.
This is the line I used to initialize:
const userInfo = document.getElementById("userinfo");

where is that html element that has the ID with that name? You have to use the exact name that it is used in your html code.

I am experiencing the same issue. Does anyone perhaps have a solution to share please. There are no typos and I have seen this error reported by mulitple people by now. Could there be a mistake in the tutorial, or perhaps a code update? Thanks

I started using the files from the Github repo of the completed tutorial. You can host the site from within the folder called “Styled Frontend”. Now I’m stuck on the minting part though. Let me know if you find anything else out!