This is a error about function not defined

242 Views Asked by At

In my html file, I have defined onclick event for forgot password() function which is defined in another js file sigin.js but on live server it is giving error:

VM19 signin.html:20 Uncaught ReferenceError: forgotPass is not defined
    at HTMLAnchorElement.onclick (VM19 signin.html:20:67)

This is my html code:

Signin





    <img src="users.png">
    <h2>Sign in</h2>
    

        <input type="text" id="username" class="input-box" placeholder="username"><br>
        <input type="email" id= "email" class="input-box" placeholder="email id"><br>
        <input type="password" id="password" class="input-box" placeholder="passsword"><br>
        <a href="#" class="forgetpass" onclick="forgotPass()">forget password?</a>
    
        <button type="submit" id="signIn" class="signin-btn">Sign in</button>
    
        <hr>
        <p class="or" style="color: rgb(255, 0, 64);">Or sign in with</p>
         
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-linkedin-in"></i></a><br>
       
        <p style="color: rgb(255, 0, 64);">Don't have an account? <a href="signup.html" style="color: rgb(255, 0, 64);">Create account</a></p>
           
        
    </form>
</div>

//This is my js file:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import { getDatabase,ref,update } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js";
import { getAuth, signInWithEmailAndPassword,sendPasswordResetEmail } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDmNExTV5gaczHbcsrTXjNvab7vmug0rIw",
  authDomain: "authentication-app-2de5b.firebaseapp.com",
  databaseURL: "https://authentication-app-2de5b-default-rtdb.firebaseio.com",
  projectId: "authentication-app-2de5b",
  storageBucket: "authentication-app-2de5b.appspot.com",
  messagingSenderId: "932491620237",
  appId: "1:932491620237:web:5a2f2038c025dd3a8997c4"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

const auth = getAuth();

var signIn = document.getElementById("signin-form");
signIn.addEventListener('submit',(e)=>{
    e.preventDefault();
   var email = document.getElementById("email").value;
   var password = document.getElementById("password").value;
   var username = document.getElementById("username").value ;
   signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    const date = new Date();
    update(ref(database,'users/'+ user.uid),{
      last_login : date
   })
   alert("Sign in successfully!!");
   document.getElementById("signin-form").reset();
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    alert(errorMessage);
  });

})
function forgotPass(){
  const email = document.getElementById("email").value;
 sendPasswordResetEmail(email)
   .then(() => {
     // Password reset email sent!
     // ..
     alert("Password reset link sent to your email successfully!!");
   })
   .catch((error) => {
     const errorCode = error.code;
     const errorMessage = error.message;
     alert(errorMessage);
     // ..
   })
 }

I have tried a lot but I don't found any solution for this problem. Please try to find out the problem so that I can go ahead:)

1

There are 1 best solutions below

4
Joe Moore On

You also have not passed in auth to your sendPasswordResetEmail method which will cause an API error.

It's odd that your debugger/IDE didn't pick up that you were missing an argument, perhaps it's because you're using inline JS.

It's always good to move JS into seperate files callable from the HTML file. You can do this with html script tags.