Внедрение системы входа в систему на моем веб-сайте для отображения определенного раздела веб-сайта сразу после входа пользователя

Question

Я пытаюсь внедрить систему входа в систему на своем веб-сайте, используя бесплатный сервис аутентификации в Firebase.

Проблема в том, что, как только я установил куски, осматривая свою страницу с помощью консоли, я вижу эту ошибку: «Uncaught TypeError: signupButton.addEventListener не является функцией».

Я новичок ie в топи c, поэтому я проведу вас через весь процесс, просто чтобы убедиться, что я все настраиваю правильно. Любая помощь, которую вы можете оказать на topi c, будет потрясающей.

Сначала настройте простую форму 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

<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>

Затем я создаю механизм регистрации

<script>
    signupButton.addEventListener('click', signup);

function signup() {
    signupButton.style.display = 'none';
    signupError.style.display = 'none';
    var email = signupEmail.value; 
    var password = signupPassword.value; 

    firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function ()  {
window.location.replace('./personal');
})
.catch(function(error) {
  var errorCode = error.code;
  var errorMessage = error.message;
  console.log('Error code: ' + errorCode);
  console.log('Error message: ' + errorMessage);
  signupButton.style.display = 'block';
  signupError.innerText = errorMessage;
  signupError.style.display = 'block';
});
}
</script>

и несколько кодов для распознавания статуса входа в систему:

<script>

firebase.auth().onAuthStateChanged(function(user) {
 if (user) {
   // User is signed in.
   console.log('User is logged in!');
   console.log('Email: ' + user.mail);
   console.log('UID: ' + user.uid);
 } else {
   // User is signed out.
   // ...
   console.log('No user is logged in');
 }
});
</script>

Затем, когда я пытаюсь это сделать на консоли я получил заранее заданную ошибку:

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

Вместо этого для консоли нет проблем с распознаванием того, что никто не вошел в систему, поэтому кажется, что журнал входа в систему работает нормально. Кажется, что двигатель регистрации не работает должным образом. У кого-нибудь из вас есть идеи, как это исправить?

Большое спасибо заранее за вашу помощь, Дани

Answer 1

Вы забыли определить переменную, попробуйте это

var signupButton = document.querySelector("#signupButton");
signupButton.addEventListener('click', signup);
...