Cloning rarible Logout, Close, profile and Save button not working and profile photo not display ,,, please any help

Moralis.initialize("YykBOopEziNqEcaJuyISHV3LbXYBfO1O9CMi6dDm");

Moralis.serverURL = 'https://uz9jpvslyldb.moralishost.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);

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

}

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.onlick = openUserInfo;

const userInfo = document.getElementById("UserInfo");

const userUsernameField = 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;

const createItemform = document.getElementById("CreateItem");

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

const txtCreateItemDescriptionField = document.getElementById("txtCreateItemDescription");

const createItemPriceField = document.getElementById("numCreateItemPrice");

const createItemStatusField = document.getElementById("selectCreateItemStatus");

const createItemFile = document.getElementById("fileCreateItemFile");

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

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

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

init();



<!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>inimitable</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" 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>  

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

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

<button id="btnLogout">Log out</button>

it looks like you have all elements for logout button to work, what error do you get?

on my http://localhost:8000/index.html
if i click the save, logout, close and profile button all are not working when click it

if you open your browser console, do you see any error there when you click those buttons or when you load the page?

it don’t show error , but it don’t work when i try to close or logout

what happens if you run logout directly in browser console, by typing logout() an hitting enter after that?

this what it say in browser console

logout()
Promise {: TypeError: Cannot read properties of null (reading ‘style’)
at hideElement (http://localhost:80…}
main.js:79 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘style’)
at hideElement (main.js:79)
at logout (main.js:34)
hideElement @ main.js:79
logout @ main.js:34
async function (async)
logout @ main.js:33
(anonymous) @ VM83:1Preformatted text

ok, so this part doesn’t work: hideElement(userInfo); but you should be logged out if you refresh the page.

yes when i refresh i get logout

I keep getting this problem   when i check my browser console 

main.js:82 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style')
    at hideElement (main.js:82)
    at init (main.js:5)
    at main.js:115
hideElement @ main.js:82
init @ main.js:5
(anonymous) @ main.js:115
inpage.js:1 You are accessing the MetaMask window.web3.currentProvider shim. This property is deprecated; use window.ethereum instead. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
(anonymous) @ moralis.js:4472
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
_getWeb3FromBrowser @ moralis.js:4513
getWeb3FromBrowser @ moralis.js:4458
(anonymous) @ moralis.js:4535
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:4551
(anonymous) @ moralis.js:4991
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5008
(anonymous) @ moralis.js:5129
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5212
login @ main.js:25
Show 8 more frames
inpage.js:1 MetaMask: The event 'close' is deprecated and may be removed in the future. Please use 'disconnect' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193#disconnect
_warnOfDeprecation @ inpage.js:1
on @ inpage.js:1
f.setProvider @ index.js:131
t @ index.js:39
packageInit @ index.js:45
c @ index.js:39
(anonymous) @ moralis.js:4488
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
_getWeb3FromBrowser @ moralis.js:4513
getWeb3FromBrowser @ moralis.js:4458
(anonymous) @ moralis.js:4535
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:4551
(anonymous) @ moralis.js:4991
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5008
(anonymous) @ moralis.js:5129
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5212
login @ main.js:25
Show 13 more frames
inpage.js:1 MetaMask: 'ethereum.enable()' is deprecated and may be removed in the future. Please use the 'eth_requestAccounts' RPC method instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1102
enable @ inpage.js:1
(anonymous) @ moralis.js:4490
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
_getWeb3FromBrowser @ moralis.js:4513
getWeb3FromBrowser @ moralis.js:4458
(anonymous) @ moralis.js:4535
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:4551
(anonymous) @ moralis.js:4991
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5008
(anonymous) @ moralis.js:5129
tryCatch @ moralis.js:26158
invoke @ moralis.js:26388
(anonymous) @ moralis.js:26213
asyncGeneratorStep @ moralis.js:25667
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
Promise.then (async)
asyncGeneratorStep @ moralis.js:25677
_next @ moralis.js:25689
(anonymous) @ moralis.js:25696
Wrapper @ moralis.js:28676
(anonymous) @ moralis.js:25685
(anonymous) @ moralis.js:5212
login @ main.js:25
Show 8 more frames`Preformatted text`
 
when i click create , profile, logout , save Button all are not work, 
.js file

Moralis.initialize("YykBOopEziNqEcaJuyISHV3LbXYBfO1O9CMi6dDm");

Moralis.serverURL = 'https://uz9jpvslyldb.moralishost.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);

    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 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 nftFiles.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 = nftFileMetadataFile.ipfs();

    const nftFileMetadataFileHash = nftFileMetadataFile.hash();

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

    // Create a new instance of that class.

    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.onlick = openUserInfo;

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

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

// User profile

const userInfo = document.getElementById("UserInfo");

const userUsernameField = 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 txtCreateItemDescriptionField = 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();



.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>inimitable</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" 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>  

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

It could be related to this line, userInfo may not be initialised, if you comment that line you may not see that error any more

it not working still the same and it not connecting to wallet again

you can take smaller steps in order to fix the problem, you can try to make a html that handles only login, then add logout and so on. that particular this error may be from this function:

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

when it looks like it doesn’t find userInfo or createItemForm
and you have:

const userInfo = document.getElementById("UserInfo");
    <div id="userInfo">

const createItemform = document.getElementById("CreateItem");
    <div id="createItem">

It looks like at least you don’t use the same names for ID, in one place is createItem and in one place CreateItem for example.