[SOLVED] Uncaught (in promise) ReferenceError: hideElement is not defined at initializeApp (main.js:5) reupload

HTML:

<!DOCTYPE html>

  <html>

    <head>

      <title>Title</title>

      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>

      <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    </head>

 

    <body>

      <button id="btn-login">Connect Your MetaMask</button>

      <button id="btn-profile">Profile</button>

      <div id="userInfo">

          <h4>User Profile</h4>

          <input type="text" id="txtUsername" required placeholder="Enter Username">

          <input type="text" id="txtEmail" required placeholder="Enter Email Address">

        <small>Optional</small>

        <img src="" id="imgAvatar" alt="">

        <label for="fileAvatar">Select Avatar</label>

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

        <button id="btn-logout">Logout</button>

        <button id="btn-CloseUserInfo">Close</button>

        <button id="btn-SaveUserInfo">Save</button>

      </div>

      <script type="text/javascript" src="./main.js"></script>

    </body>

  </html>

</html>

Index.js:

MoralisWeb3 = serverUrl = "https://w6j9c9lnnoio.usemoralis.com:2053/server"; //Server url from moralis.io

MoralisWeb3 = appId = "wZsf07rYLfsPudepzTdjvrAsYfgWAQb0BFbnTFJI"; // Application id from moralis.io

async function initializeApp() {

  hideElement(userInfo)

  await Moralis.start({ serverUrl, appId });

  await Moralis.enableWeb3();

  currentUser = Moralis.User.current();

  if (!currentUser){

       currentUser = await Moralis.Web3.authenticate();

}

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("btn-login");

userConnectButton.onclick = login;

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

userProfileButton.onclick = openUserInfo;

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

document.getElementById("btn-CloseUserInfo").onclick = () => hideElement(userInfo);

document.getElementById("btn-logout").onclick = logout;

document.getElementById("userInfo").style.display = "none";

}

initializeApp();

are you sure the syntax is correct in you main.js?
can you put a console.log(β€œend of file”) at the end for main.js and see if it really gets executed in your browser console?

it is working, ive been checking the console, the metamask is getting connected the buttons are functioning but i cant add hideElement(userInfo) and if i do the whole thing stops working

where from is that } there?

from here: async function initializeApp() {

You should end your initializeApp function here and not at the end of file.

Thanks Bro, It Started Working :smiley:

1 Like