在我的网站中实现登录系统，以便在用户登录后显示网站的某些部分

Question

我正在尝试利用 Firebase 中的免费身份验证服务在我的网站中实现登录系统。

问题是，一旦我将这些部分设置到位，使用控制台检查我的页面，我会看到以下错误：“未捕获的类型错误：signupButton.addEventListener 不是函数”。

我是这个主题的新手，所以我将引导您完成整个过程，以确保我的设置正确。您可以就该主题提供的任何帮助都会很棒。

首先在我的网站页面中设置一个简单的 HTML 表单

<form action="/action_page.php">

<label for="email">Sign Up Email:</label>

<input type="text" id="signupEmail" name="signupEmail"><br><br>

<label for="pwd">Sign Up Password:</label>

<input type="text" id="signupPassword" name="signupPassword"><br><br>

 </form>`<label for="email">Sign Up Email:</label>

<input type="text" id="signupEmail" name="signupEmail"><br><br>

<label for="pwd">Sign Up Password:</label>

<input type="text" id="signupPassword" name="signupPassword"><br><br>

 </form>

用我的注册按钮

<div class="w-container">

      <h1 class="heading-12-login2">Sign up<br></h1>

      <div id="signupButton" class="section-10">

然后我设置了我的 firebase auth 库

<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-auth.js"></script>

<script>

  var firebaseConfig = {

    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",

    authDomain: "XXXXXXXXXXXXXXXXX.firebaseapp.com",

    databaseURL: "https://XXXXXXXXX.firebaseio.com",

    projectId: "XXXXXXXXXXXXX",

    storageBucket: "XXXXXXXXXXXXXXX.appspot.com",

    messagingSenderId: "XXXXXXXXXXXXXXXX",

    appId: "XXXXXXXXXXXXXXXXXXX"

  };

  firebase.initializeApp(firebaseConfig);

</script>

然后，当我在控制台上尝试此操作时，我收到了预先指定的错误：

sign-up:95 Uncaught TypeError: signupButton.addEventListener is not a function

相反，控制台可以识别没有人登录，因此用户登录 reco 似乎可以正常工作。注册引擎似乎无法正常工作。你们中有人知道如何解决这个问题吗？

Answer 1

您忘记定义变量，试试这个var signupButton = document.querySelector("#signupButton");signupButton.addEventListener('click', signup);...