Moralis Login and Signup issue

Moralis General
#1

i was trying to create a login and signup page for my Moralis application, when i tried to make a single file of HTML which includes both sign up and login buttons its work perfectely , but when i seperate login page from signup page its not working at all. please help out me to find the error .

HERE IS MY CODE:

Moralis.initialize('4Sccq6cN1WDXwyFZy6JmX2eYbp0mnmI2JepIF427');
Moralis.serverURL = 'https://zu5gnddmuhph.moralis.io:2053/server';

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("Signed up by user:", user);
    } catch (error) {

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


//log in using email and possward!

login = async (email, password) => {
    try {
        const user = await Moralis.User.logIn(email, password, { usePost: true });
        console.log("user",user);
        alert("User Loged In ")
    } catch (error) {
        alert("Error: " + error.code + " " + error.message);
    }

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

here is my HTML CODE for signup

<!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>Moralis Application</title>

    <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="app.js"></script>
</head>
  <body>
    <h1>Welcome  to signup</h1>
            <label  for="fname">Email:</label>
            <input type="email" name="" id="email" placeholder=" your email" />
            <label  for="fname">password:</label>
            <input   type="password" name="" id="password" placeholder=" enter password" />
            <button  id="signup">Sign-Up</button>
            <br />
            
</head>   
  </body>
</html>

Here is my second HTML code for login page

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

    <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="app.js"></script>

    <title>Moralis Application</title>
</head>
  <body>
    <h1>Welcome to signin</h1>
            <label  for="fname">Email:</label>
            <input type="email1" name="" id="email" placeholder=" your email" />
            <label  for="fname">password:</label>
            <input   type="password" name="" id="password1" placeholder=" enter password" />
            <button  id="login">log-in</button>
            <br />
  </body>
</html>
#2

What error do you get?