Unused function whe using import

So I'm trying to implement login into my website, here is the html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
<link rel="stylesheet" href="css/login.css">

</head>
 <body>
 <div class="container">
  <div class="row">
   <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
     <div class="card card-signin my-5">
      <div class="card-body">
       <h5 class="card-title text-center">Sign In</h5>
        <form class="form-signin">
         <div class="form-label-group">
          <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
          <label for="inputEmail">Email address</label>
        </div>

        <div class="form-label-group">
          <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
          <label for="inputPassword">Password</label>
        </div>

        <div class="custom-control custom-checkbox mb-3">
          <input type="checkbox" class="custom-control-input" id="customCheck1">
          <label class="custom-control-label" for="customCheck1">Remember password</label>
        </div>
        <button onclick="register()" class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
        <hr class="my-4">
        <button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign in with Google</button>
        <button class="btn btn-lg btn-facebook btn-block text-uppercase" type="submit"><i class="fab fa-facebook-f mr-2"></i> Sign in with Facebook</button>
      </form>
    </div>
  </div>
</div>

      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
   <script src="/__/firebase/8.4.3/firebase-app.js"></script>

   <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
   <script src="/__/firebase/8.4.3/firebase-analytics.js"></script>

   <!-- Add Firebase products that you want to use -->
   <script src="/__/firebase/8.4.3/firebase-auth.js"></script>
   <script src="/__/firebase/8.4.3/firebase-firestore.js"></script>

   <!-- Initialize Firebase -->
   <script src="/__/firebase/init.js"></script>

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

   </body>
  </html>

And here is the code for register() in the js file

const firebase = require("firebase");

function register(){
let email = document.getElementById('inputEmail').value
let password = document.getElementById('inputPassword').value
firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        console.log(user);          // ...
})
    .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorMessage, errorCode);
    });
}

However when I try to click the button to invoke the register(), I get a "register is not defined" and if I leave out the import, it'll invoke but then firebase will not be defined.

I was hoping someone could help me out?

Unused function whe using import

0 Answers