createItem function isnt defined

Hi guys.
Iā€™m having a issue with my createItem function. It keeps saying its undefined.
Thanks in advance.
Cheers
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>

        <button id="btnOpenCreateItem">Create</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>

    <div id="createItem">

        <h4>create Item</h4>

        <input type="text" id="txtCreateItemName" required placeholder="Enter name">

        <textarea id="txtCreateItemDescription" cols="30" rows="5" placeholder="Enter description"></textarea>

        <input type="number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter price" required>

        <label for="selectCreateItemStatus">Status</label>

        <select id="selectCreateItemStatus">        

            <option value="0">Not for sale</option>

            <option value="1">Instant buy</option>

            <option value="2">Accept Offers</option>

        </select>

        <label for="fileCreateItemFile">Select File</label>

        <input type="file" id="fileCreateItemFile">

        <button id="btnCloseCreateItem">Close</button>

        <button id="btnCreateItem">Create!</button>

        <label for="createItem">Select a Item</label>"

        <input type="file" id="fileCreateItemFile">

    </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://da83jdqdl0gt.usemoralis.com:2053/server";

const appId = "JllyuQ1vxxN5cY6WSllUYPm9IWzeyKnh6ZvZ9sS9";

Moralis.start({ serverUrl, appId });

init = async () => {

    hideElement(userInfo);

    hideElement(createItemForm);

    await Moralis.enableWeb3();

        initUser();

}

initUser = async () => {

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

        hideElement(userConnectButton);

        showElement(userProfileButton);

        showElement(openCreateItemButton);

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

        hideElement(openCreateItemButton);

        hideElement(createItemForm);

    }

}

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

        }

        userNameField.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', userNameField.value);

    if (userAvatarFile.files.length > 0) {

        const avatar = new Moralis.File("avatar1.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 a 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 nftFileMetadataFile = new Moralis.file("Metadata.json", { base64 : btoa(JSON.stringify(Metadata))});

    await nftFileMetadataFile.saveIPFS();

    const nftFileMetadataFilePath = nftFileMetadata.ipfs();

    const nftFileMetadataFileHash = nftFileMetadata.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('metadataFileHash', nftFileMetadataFileHash);

    await item.save();

    console.log(item);

}

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

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

//Navbar

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

userConnectButton.onclick = login;

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

userProfileButton.onclick = openUserInfo;

//User Profile

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;

//Item Creation

const createItemForm = document.getElementById("createItem");

const openCreateItemButton = document.getElementById("btnOpenCreateItem");

openCreateItemButton.onclick = () => showElement(createItemForm);

document.getElementById("btnCloseCreateItem").onclick = () => hideElement(createItemForm);

document.getElementById("btnCreateItem").onclick = createItem;

init();

What do you do in your app to get this error? Check any references to createItem.

Iā€™m creating a item to store on my NFT marketplace. I enter a name, description, price and upload the NFT. I hit the create button next to it and it wont create the item. I get createItem is not defined in my console.
Ill have a look now.
Cheers

Do you mean this error createItemFile is not defined ? This is the error I get because createItemFile has not been created or defined anywhere in your code.

You need to make a reference to the element:

createItem = async () => {
    const createItemFile = document.getElementById('fileCreateItemFile');

...

So start at the lines where these errors appear and work from there.

Also the web3 and moralis scripts should be placed in the page head.

Ok thank you for your help.
Ill fix it up now

Hi Glad
I think I have referenced the element now but I still am having the same issue with my create button.
Is there anything else I could try please?
Cheers

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>

        <button id="btnOpenCreateItem">Create</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>

    <div id="createItem">

        <h4>create Item</h4>

        <input type="text" id="txtCreateItemName" required placeholder="Enter name">

        <textarea id="txtCreateItemDescription" cols="30" rows="5" placeholder="Enter description"></textarea>

        <input type="number" min="1" step="1" id="numCreateItemPrice" placeholder="Enter price" required>

        <label for="selectCreateItemStatus">Status</label>

        <select id="selectCreateItemStatus">        

            <option value="0">Not for sale</option>

            <option value="1">Instant buy</option>

            <option value="2">Accept Offers</option>

        </select>

        <label for="fileCreateItemFile">Select File</label>

        <input type="file" id="fileCreateItemFile">

        <button id="btnCloseCreateItem">Close</button>

        <button id="btnCreateItem">Create!</button>

        <label id="creatItemNameField">Create!</label>

        <input type="file" id="createItemNameField">

    </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://da83jdqdl0gt.usemoralis.com:2053/server";

const appId = "JllyuQ1vxxN5cY6WSllUYPm9IWzeyKnh6ZvZ9sS9";

Moralis.start({ serverUrl, appId });

init = async () => {

    hideElement(userInfo);

    hideElement(createItemForm);

    await Moralis.enableWeb3();

        initUser();

}

initUser = async () => {

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

        hideElement(userConnectButton);

        showElement(userProfileButton);

        showElement(openCreateItemButton);

    }else{

        showElement(userConnectButton);

        hideElement(userProfileButton);

        hideElement(openCreateItemButton);

        hideElement(createItemForm);

    }

}

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

        }

        userNameField.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', userNameField.value);

    if (userAvatarFile.files.length > 0) {

        const avatar = new Moralis.File("avatar1.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 a file!");

        return;

    }else if (createItemNameField.files.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 nftFileMetadataFile = new Moralis.file("Metadata.json", { base64 : btoa(JSON.stringify(Metadata))});

    await nftFileMetadataFile.saveIPFS();

    const nftFileMetadataFilePath = nftFileMetadata.ipfs();

    const nftFileMetadataFileHash = nftFileMetadata.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('metadataFileHash', nftFileMetadataFileHash);

    await item.save();

    console.log(item);

}

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

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

//Navbar

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

//Item Creation

const createItemForm = document.getElementById("createItem");

const createItemNameField = document.getElementById("txtCreateItemName");

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

init();