How to call newuser() function in button onlick? (Firebase)

Question

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
        <title>DB Test</title>
    </head>
    <body>
        <a><h1>DB Test</h1></a>

        <div class="input-box">
            <input id="email" type="text" name="username" placeholder="email">
            <label for="email">Email</label>
        </div>

        <div class="input-box">
            <input id="password" type="password" name="password" placeholder="pw">
            <label for="password">password</label>
        </div>

        <input type="button" id="button" value="submit" onclick="newuser();">

        <script type="module">
            // Import the functions you need from the SDKs you need
            import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
            import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.4.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 = {
                ...
            };

            // Initialize Firebase
            const app = initializeApp(firebaseConfig);
            const auth = getAuth();

            const email = document.getElementById('email').value
            const password = document.getElementById('password').value
            function newuser(){
            createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
              // Signed in
              const user = userCredential.user;
              // ...
            })
            .catch((error) => {
              const errorCode = error.code;
              const errorMessage = error.message;
              // ..
            });
        }
        </script>
    </body>
</html>

I want to call newuser() function in script tag at onclick event in button, but error occurs like 'newuser is not defined at HTMLInputElement.onclick'. I don't know how to connect html code and javascript code(script tag) naturally, and I want to make newuser function occur when I click the button.

Renaud Tarnec · Accepted Answer · 2022-08-15T08:36:19.050

This is because with <script type="module"> you indicate that your script should be treated as a module.

Since each module has its own top-level scope, variables and functions from a module are not seen in other scripts or in the HTML part of the page. See here for more details.

You could solve your problem by attaching the function to window to use it globally:

      window.newuser = () => {
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        console.log(password);
        createUserWithEmailAndPassword(auth, email, password)
          .then((userCredential) => {
            // Signed in
            const user = userCredential.user;
            // ...
          })
          .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            // ..
          });
      };

But this not really recommended... You should use a module bundler like Webpack, as explained in the Firebase documentation. "From version 9 and higher, the Firebase JavaScript SDK is optimized to work with the optimization features of module bundlers to reduce the amount of Firebase code included in your final build."

In addition, note that it is not recommended to use onclick() see this answer (among many answers in SO): better use addEventListener().

pureink · Answer 2 · 2022-08-15T08:11:14.483

0

Try put the script tag with your newuser function into . You need declare the function first, then use it.

<head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="module">
         …………
        </script>
        <title>DB Test</title>
</head>

edited Aug 15 '22 at 08:11

answered Aug 15 '22 at 07:59

pureink

26
2

Where do I put the script tag with newuser function into? Head tag? – Default Aug 15 '22 at 08:05
Answer modified. – pureink Aug 15 '22 at 08:11
I change the position of script tag, but reference error still occurs – Default Aug 15 '22 at 08:15
Sorry for the misunderstanding, check this https://stackoverflow.com/questions/49338193/how-to-use-code-from-script-with-type-module – pureink Aug 15 '22 at 08:30

How to call newuser() function in button onlick? (Firebase)

2 Answers2