This is a error about function not defined

Question

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:)

Please obfuscate your firebase config details. – Joe Moore Jan 20 '23 at 10:36 — Joe Moore, Jan 20 '23 at 10:36

Joe Moore · Answer 1 · 2023-01-20T11:17:33.817

1

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.

edited Jan 20 '23 at 11:17

answered Jan 20 '23 at 10:38

Joe Moore

2,031
2
8
29

the function forgotPass() does exist, I believe there are some syntax error just before the definition of the function, hence JS is not able to parse the function, that's why it's saying the function is not defined – Matrix11 Jan 20 '23 at 10:45
I don't think there are syntax errors, I've pasted it into my editor and it hasn't thrown any errors. I think it may be to do with one of the Firebase functions used not having the correct number of parameters. – Joe Moore Jan 20 '23 at 10:46
1

Absolutely, in my case I've commented out everything related to firebase, and the function forgotPass() was called successfully. It's more a firebase issue here, rather than the function forgotPass() not being defined – Matrix11 Jan 20 '23 at 11:14
It's to do with the `sendPasswordResetEmail` not having the `auth` parameter I believe, untested though. – Joe Moore Jan 20 '23 at 11:15

This is a error about function not defined

1 Answers1