How to solve 'Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)' in Fir-CodePudding

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

        <!--<link href="index.css" rel="stylesheet" />-->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <!--<script src="./src/index.js"></script>-->

        <title>DB Test</title>
    </head>
    <body>
        <a><h1>DB Test</h1></a>

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

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

        <div >
            <input id="loc" type="text" name="loc" placeholder="loc">
            <label for="loc">location</label>
        </div>

        <div >
            <input id="phone_num" type="text" name="phone_num" placeholder="phone_num">
            <label for="phone_num">phone_num</label>
        </div>

        <div >
            <input id="JMT" type="text" name="JMT" placeholder="JMT">
            <label for="JMT">JMT</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";
            //import { getFirestore, collection, getDocs, addDoc } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.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 loc = document.getElementById('loc').value;
            const phone_num = document.getElementById('phone_num').value;
            var JMT = document.getElementById('JMT').value.split(",");
            var JMT_map = new Map();
            
            for (var i = 0; i < JMT.length; i  ){
                JMT_map.set(JMT[i], 1)
            }

            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;
                    alert("Success")
                    location.replace('./test.html')
                })
                .catch((error) => {
                    const errorCode = error.code;
                    const errorMessage = error.message;
                    alert("Error")
                })

                try {
                    *const docRef = await addDoc(collection(db, "users")*, {
                      phone: phone_num,
                      position: loc,
                      JMT: JMT_map
                    });
                    console.log("Document written with ID: ", docRef.id);
                  } catch (e) {
                    console.error("Error adding document: ", e);
                  }
            }
        </script>
    </body>
</html>

I use firebase now,and I want to make 'newuser' function work for authentication and add new data in firestore database. But 'Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)' occurs now, and 'index.html:42 Uncaught ReferenceError: newuser is not defined at HTMLInputElement.onclick' occurs. How to solve this problem?

CodePudding user response：

The following should do the trick. As explained in my comment above, you need to chain the different Firebase asynchronous method calls (which return a Promise). (This technique is absolutely KEY when working with Firebase. I would kindly suggest you go through the documentation on Promises and chaining).

    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;
            // ... get loc, phone_number, etc.
            return addDoc(collection(db, "users"), {
                phone: phone_num,
                position: loc,
                JMT: JMT_map
            });
            // NOTE!!: you most probably want to create a Firestore user doc with the user Id as the doc Id... In this case use user.uid
        })
        .then((docRef) => {
            console.log("Document written with ID: ", docRef.id);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode);
            console.log(errorMessage);
        });
    }