signInWithEmailAndPassword javascript 不工作

Question

我正在尝试制作一个允许用户登录的页面。我看过视频教程，但它们将登录和注册合并在一个页面中。我想使用不同的页面来登录用户。 javascript 可以工作，但它不会进入signInWithEmailAndPassword 函数内部。

我的html

<div id="navbar">
        <div class="subhead1">
            <a href="../index.html"><img src="../Images/logo.png" class="logo"></a>
        </div>
        <div class="subhead2">
            <div>
                <a href="signup.html" class="signup">Sign Up</a>
            </div>
            <div>
                <a href="account_type.html" class="login">Login</a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="header">
                <h2>Customer Login</h2>
            </div>
            <form>
                <div class="input">
                    <div class="input-row">
                        <input type="text" name="email" placeholder="Email" required />
                    </div>
                    <div class="input-row">
                        <input type="password" name="password" placeholder="Password" required />
                    </div>
                    <div class="input-row">
                        <div class="remember-me">
                            <input type="checkbox" id="remember" name="remember" value="Remember Me" />
                            <label for="remember"> Remember Me</label>
                        </div>
                        <button id="submitData" name="submitData">Login</button>
                    </div>
                    <div class="input-row">
                        <a href="#">Forgot Password</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

我的Javascript

<script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-analytics.js";
        import {
            getAuth,
            signInWithEmailAndPassword
        } from "https://www.gstatic.com/firebasejs/9.10.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: "redacted",
            authDomain: "redacted",
            projectId: "redacted",
            storageBucket: "redacted",
            messagingSenderId: "redacted",
            appId: "redacted",
            measurementId: "redacted",
            databaseURL: "redacted"
        };

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

        // Firebase functions

        submitData.addEventListener('click', (e) => {
            alert("test");
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;
            signInWithEmailAndPassword(auth, email, password)
                .then((userCredential) => {
                    // Signed in 
                    const user = userCredential.user;
                    alert("Success");
                    // ...
                })
                .catch((error) => {
                    const errorCode = error.code;
                    const errorMessage = error.message;
                    alert("Error");
                });
        });
    </script>

Answer 1

alert()

会阻止代码执行，请将其替换为

console.log()

。另外，添加

e.preventDefault()

作为函数中的第一行，否则表单将被提交（页面将刷新）正如 Dharmaraj 评论的。

我缺少输入元素中的 id 属性，因此 javascript 无法获取我正在输入的值。感谢 Dharmaraj 的评论，我能够解决它。