Javascript firebase code results in "is not a function"

Question

error is SignUp is not a function, can't see why

    <form>

<label for="Email">Email</label><input type="text" id="Email">

<label for="Password">Password</label><input type="text" id="Password">

<button onclick="SignUp()" id="SignUp">SignUp</button>

    </form>



        <!-- The core Firebase JS SDK is always required and must be listed first -->
        <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-analytics.js"></script>


<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

<script>
  const auth = firebase.auth();
</script>

<script>
  function SignUp() {
      var email = document.getElementById("Email");
      var password = document.getElementById("Password");
      const promise = auth.createUserWithEmailAndPassword(email.value, password.value);
  }
</script>

  </body>
</html>

Answer 1

Intrinsic event attributes do horrible things with scope.

When you use the identifier SignUp it searches up the DOM from the <button> the onclick attribute belongs to.

The first thing it finds with that name is the button itself — because it has the id SignUp.

The button is not a function, hence the error.

---

The quick and dirty solution to this is to rename either the function or the button.

The better solution is to use addEventListener instead of the techniques we were stuck with in the 1990s.