[SOLVED] RARIBLE PART 5 (Cannot read properties of null (reading value))

Moralis General
#1

Hey there,

im catching this error message after following the rarible clone tutorial:

Screen Shot 2021-09-08 at 11.05.55 AM
Screen Shot 2021-09-08 at 11.05.55 AM3578×744 306 KB

The error message suggests the fail coming from line 85 in the main.js file. i played around with removing.value or .length from the statement but it wouldnt work. What did i miss here?

appreciate your help guys.

enjoy your day

main.js Code:

Moralis.initialize("9xPG6EnH2JW77pGfdcSZzHZCCP4Yd28csymO4Dcv");
Moralis.serverURL = "https://qejutygvunvz.moralisweb3.com:2053/server";

init = async () => {
    hideElement(userInfo);
    hideElement(createItemForm);
    window.web3 = await Moralis.Web3.enable();
    initUser();
}

initUser = async () => {
        if (await Moralis.User.current()){
            hideElement(userConnectButton);
            showElement(userProfileButton);
            showElement(openCreateItemButton);
        }else {
            showElement(userConnectButton);
            hideElement(userProfileButton);
            hideElement(openCreateItemButton);     
        }
}

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){
        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); // check double username"

        if(userAvatarFile.files.length > 0){
            
            const avatar = new Moralis.File("avatar.jpg", userAvatarFile.files[0]);
            user.set("avatar", avatar);
        }

        await user.save();
        alert("User info saved successfully");
        openUserInfo();
}

createItem = async () => {
    if(createItemFile.files.length == 0){
        alert("please select file");
        return;
    }else if (createItemNameField.value.length == 0){
        alert("Please give the item a name");
        return;
    }

    const nftFile = new Moralis.File("nftFile.jpg", createItemFile.files[0]);
    await nftFile.saveIPFS();

    const nftFilePath = nftFile.ipfs();
    const nftFileHash = nftFile.hash();

    const metadata = {
        name: createItemNameField.value,
        description: createItemDescriptionField.value,
        nftFilePath: nftFilePath,
        nftFileHash: nftFileHash
    };
    
    const nftFileMetadata = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
    await nftFileMetadata.saveIPFS();  

    const nftFileMetadataFilePath = nftFileMetadataFile.ipfs();
    const nftFileMetadataFileHash = nftFileMetadataFile.hash(); 

    const Item = Moralis.Object.extend("Item");

    const item = new Item();
    item.set("name", createItemNameField.value);
    item.set("description", createItemDescriptionField.value);
    item.set("nftFilePath", nftFilePath);
    item.set("nftFileHash", nftFileHash);
    item.set("metadataFilePath", nftFileMetadataFilePath);
    item.set("metadataFilePath", nftFileMetadataFilePath);
    await item.save();
    console.log(item);
    
}


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

//Navigationsbar

const userConnectButton = document.getElementById("btnConnect");
userConnectButton.onclick = login;

const userProfileButton = document.getElementById("btnUserInfo");
userProfileButton.onclick = openUserInfo;

const openCreateItemButton = document.getElementById("btnOpenCreateItem");
openCreateItemButton.onclick = () => showElement(createItemForm);


// User Profile
const userInfo = document.getElementById("userInfo");
const userUsernameField = document.getElementById("textUsername");
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;

// Item Creation

const createItemForm = document.getElementById("createItem");
const createItemNameField = document.getElementById("txtCreateItem");
const createItemDescriptionField = document.getElementById("txtCreateItemDescription");
const createItemPriceField = document.getElementById("numCreateItemPrice");
const createItemStatusField = document.getElementById("selectCreateItemStatus");
const createItemFile = document.getElementById("fileCreateItemFile");
document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);
document.getElementById("btnCreateItem").onclick = createItem;


init();
#2

const createItemNameField = document.getElementById("txtCreateItem");
you have to look in HTML code to see if it has same exact Id.

1 Like
#3

Thank you @cryptokid … after fixing the issue according to your recomendation, i got another error message wich also was related to some Name error… I figured it all out now. appreciate your help.

(SOLVED)

1 Like