Why my login button not hide after sign in

Moralis General
#1 
<!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>KEMERENVILLE</title>

</head>

<body>

    <input type="email" name="" id="email" placeholder="email">

    <input type="password" name="" id="password" placeholder="password">

    <button id="signup">Sign up</button>

    <button id="login">Login</button>

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

    <button id="loginWithMetamask">Login With metamask</button>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js" ></script>

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

    <script src="main.js"></script>

</body>

</html>
#2 
Moralis.initialize("Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k");   // Application id from moralis.io

Moralis.serverURL = "https://pof75zn8copb.moralishost.com:2053/server"; //Server url from moralis.io

init = async () => {

    window.web3 = await Moralis.Web3.enable();

    const user = await Moralis.User.current();

    console.log("user");

    console.log(user);

}

login = async () => {

    await Moralis.Web3.authenticate();

    const user = await Moralis.User.current();

    console.log("user");

    console.log(user);

    hideElement(login);

    showElement(profile);

}

signup = async (email, password) => {

    const user = new Moralis.User();

    user.set("username", email);

    user.set("password", password);

    user.set("email", email);

    try {

        await user.signUp();

        console.log("user");

        console.log(user);

    // Hooray! Let them use the app now.

    } catch (error) {

        // Show the error message somewhere and let the user try again.

         alert("Error: " + error.code + " " + error.message);

    }

}

loginemail = async (email, password) => {

    try {

        const user = await Moralis.User.logIn(email, password);

        // Do stuff after successful login.

        console.log("user");

        console.log(user);

    // Hooray! Let them use the app now.

    } catch (error) {

        // Show the error message somewhere and let the user try again.

         alert("Error: " + error.code + " " + error.message);

    }

}

logout = async () => await Moralis.User.logOut();

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

hideElement = (element) => element.syle.display = "block";

document.getElementById("loginWithMetamask").onclick = login;

/* document.getElementById("Profile").onclick = profile; */

document.getElementById("signup").onclick = () => signup(document.getElementById("email").value, document.getElementById("password").value);

document.getElementById("login").onclick = () => loginemail(document.getElementById("email").value, document.getElementById("password").value);

init();
#3

Hi @Kaisanz

Please give us more information. What doesn’t work?

#4 
Moralis.initialize("Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k");   // Application id from moralis.io

Moralis.serverURL = "https://pof75zn8copb.moralishost.com:2053/server"; //Server url from moralis.io

init = async () => {

    window.web3 = await Moralis.Web3.enable();

    const user = await Moralis.User.current();

    console.log("user");

    console.log(user);

}

login = async () => {

   if (await Moralis.Web3.authenticate());

    const user = await Moralis.User.current();

    console.log("user");

    console.log(user);

    hideElement(login);

    showElement(profile);

}else{

    hideElement(profile);

    showElement(login);

}

signup = async (email, password) => {

    const user = new Moralis.User();

    user.set("username", email);

    user.set("password", password);

    user.set("email", email);

    try {

        await user.signUp();

        console.log("user");

        console.log(user);

    // Hooray! Let them use the app now.

    } catch (error) {

        // Show the error message somewhere and let the user try again.

         alert("Error: " + error.code + " " + error.message);

    }

}

loginemail = async (email, password) => {

    try {

        const user = await Moralis.User.logIn(email, password);

        // Do stuff after successful login.

        console.log("user");

        console.log(user);

    // Hooray! Let them use the app now.

    } catch (error) {

        // Show the error message somewhere and let the user try again.

         alert("Error: " + error.code + " " + error.message);

    }

}

logout = async () => await Moralis.User.logOut();

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

hideElement = (element) => element.syle.display = "block";

document.getElementById("loginWithMetamask").onclick = login;

/* document.getElementById("Profile").onclick = profile; */

document.getElementById("signup").onclick = () => signup(document.getElementById("email").value, document.getElementById("password").value);

document.getElementById("login").onclick = () => loginemail(document.getElementById("email").value, document.getElementById("password").value);

init();

before this i try follow 100% the coding but seems metamask cannot detect so i change it with coding at moralis guide.can you help me what line i need change or correct it

#5

You have missed { } in login function:

Moralis.initialize("Bh0MLNPUycz7AV77HPnFFxHtsDnY6nkhz0skZY2k"); // Application id from moralis.io

Moralis.serverURL = "https://pof75zn8copb.moralishost.com:2053/server"; //Server url from moralis.io

init = async () => {
  window.web3 = await Moralis.Web3.enable();

  const user = await Moralis.User.current();

  console.log("user");

  console.log(user);
};

login = async () => {
  if (await Moralis.Web3.authenticate()) {
    const user = await Moralis.User.current();

    console.log("user");

    console.log(user);

    hideElement(login);

    showElement(profile);
  } else {
    hideElement(profile);

    showElement(login);
  }
};

signup = async (email, password) => {
  const user = new Moralis.User();

  user.set("username", email);

  user.set("password", password);

  user.set("email", email);

  try {
    await user.signUp();

    console.log("user");

    console.log(user);

    // Hooray! Let them use the app now.
  } catch (error) {
    // Show the error message somewhere and let the user try again.

    alert("Error: " + error.code + " " + error.message);
  }
};

loginemail = async (email, password) => {
  try {
    const user = await Moralis.User.logIn(email, password);

    // Do stuff after successful login.

    console.log("user");

    console.log(user);

    // Hooray! Let them use the app now.
  } catch (error) {
    // Show the error message somewhere and let the user try again.

    alert("Error: " + error.code + " " + error.message);
  }
};

logout = async () => await Moralis.User.logOut();

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

hideElement = (element) => (element.syle.display = "block");

document.getElementById("loginWithMetamask").onclick = login;

/* document.getElementById("Profile").onclick = profile; */

document.getElementById("signup").onclick = () =>
  signup(
    document.getElementById("email").value,
    document.getElementById("password").value
  );

document.getElementById("login").onclick = () =>
  loginemail(
    document.getElementById("email").value,
    document.getElementById("password").value
  );

init();

I suggest you to use Visual Code Studio+ plugin Pretier