Как отрендерить событие клик?

Question

[Danya Wyse]

Есть база данных firebase
Если пройти через регистрацию - авторизацию появляется КНОПКА, которая перекидывает на другую страницу на которой создается с помощью функции список пользователей который берется из базы данных Firebase. Но я уже который час бьюсь и не могу понять в чем возникает проблема между переходом на страницы, экспорты вписываю, но все равно ругается на переменную emails.
Создал еще одну кнопку на странице users.html чтобы убедиться, что рендер вообще осуществляется, если нажать на кнопку show database , то юзеры появляются (Со 2 клика, я работаю на этим). Почему этого не происходит при переходе на страницу?
как будто вот этот код просто не отрабатывает

showUsers.addEventListener("click", () => {
  window.location.href = "users.html";
      createEmails();
      getEmails();
});

Вот весь код проекта

export const showUsers = document.querySelector(".showUsers"); //* Показать базу данных

if(document.querySelector('.page-homepage')) {
  const signUp = document.getElementById("signUp"); //* РЕГИСТРАЦИЯ
  const login = document.getElementById("login"); //* АВТОРИЗАЦИЯ
  const logout = document.getElementById("logout"); //* ВЫХОД ИЗ АВТОРИЗАЦИИ
  const goSignUp = document.querySelector(".goSignUp"); //* Переход к форме РЕГИСТРАЦИИ
  const goSignIn = document.querySelector(".goSignIn"); //* Переход к форме АВТОРИЗАЦИИ
  let loggedTitle = document.querySelector(".loggedTitle"); //* Показать сообщение юзеру
  
  // showUsers.style.display = "none";
  
  //* юзер зарегистрировался
  function accountIsRegistred() {
    signUp.style.display = "none";
    goSignIn.style.display = "none";
    login.style.display = "block";
    goSignUp.style.display = "block";
  }
  
  //* юзер авторизировался
  function logged() {
    let email = document.querySelector(".sign-form__email");
    let password = document.querySelector(".sign-form__password");
    login.style.display = "none";
    goSignUp.style.display = "none";
    email.style.display = "none";
    password.style.display = "none";
    logout.style.display = "block";
    loggedTitle.style.display = "block";
    showUsers.style.display = "block";
    // deleteUser.style.display = "block";
  }
  
  //* переход к регистрации
  function registration() {
    goSignUp.style.display = "none";
    logout.style.display = "none";
    login.style.display = "none";
    signUp.style.display = "block";
    goSignIn.style.display = "block";
  }
  
  //* переход к авторизации
  function goLogin() {
    let email = document.querySelector(".sign-form__email");
    let password = document.querySelector(".sign-form__password");
    accountIsRegistred();
    logout.style.display = "none";
    showUsers.style.display = "none";
    email.style.display = "block";
    password.style.display = "block";
    loggedTitle.style.display = "none";
  }
  
  goSignIn.addEventListener("click", (e) => {
    accountIsRegistred(signUp);
    goSignIn.style.display = "none";
  });
  
  
  goSignUp.addEventListener("click", (e) => {
    registration();
  });
  
  
  let validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  let errorValidate = "Invalid email";
  //* Кнопка регистрации
  signUp.addEventListener("click", (e) => {
    let email = document.getElementById("email").value;
    let password = document.getElementById("password").value;
    //* Валидация EMAIL
      if (email.match(validRegex)) {
        createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          set(ref(database, "users/" + user.uid), {
            email: email,
            password: password,
          }),
          modalVisible("user created " + email, isSuccess());
          accountIsRegistred();
        })
        .catch((error) => {
          let errorCode = error.code;
          let errorMessage = error.message;
          if (errorCode == "auth/email-already-in-use"){
            errorMessage = "Email already in use";
          } else if(errorCode == "auth/weak-password"){
            errorMessage = "Password should be at least 6 characters";
          } else if(errorCode == "auth/internal-error"){
            errorMessage = errorValidate;
          } else if(errorCode == "auth/invalid-email"){
            errorMessage = "Invalid email";
          } else if(errorCode == "auth/missing-email"){
            errorMessage = "Missing email";
          }
          else {
            error.code;
          }
          modalVisible(errorMessage, isError());
        });
      } else {
        modalVisible(errorValidate, isError());
      }
  });
  
  login.addEventListener("click", (e) => {
    let email = document.getElementById("email").value;
    let password = document.getElementById("password").value;
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        const dt = new Date();
  
        update(ref(database, "users/" + user.uid), {
          last_login: dt,
        });
        modalVisible("Loged in! " + email, isSuccess());
        logged();
        createEmails();
        loggedTitle.innerHTML = ` You are logged as  <b>${email}</b>`;
      })
      .catch((error) => {
        let errorCode = error.code;
        let errorMessage = error.message;
        console.log(errorCode);
        console.log(errorMessage);
        if (errorCode == "auth/user-not-found"){
          errorMessage = "User not found";
        } else if(errorCode == "auth/weak-password"){
          errorMessage = "Password should be at least 6 characters";
        } else if(errorCode == "auth/internal-error"){
          errorMessage = errorValidate;
        } else if(errorCode == "auth/invalid-email"){
          errorMessage = "Invalid email";
        } else if(errorCode == "auth/missing-email"){
          errorMessage = "Missing email";
        } else if(errorCode == "auth/wrong-password"){
          errorMessage = "Wrong password";
        } else if(errorCode == "auth/too-many-requests"){
          errorMessage = "Too many requests";
        }
        else {
          error.code;
        }
        modalVisible(errorMessage, isError());
      });
  });
  
  logout.addEventListener("click", (e) => {
    signOut(auth)
      .then(() => {
        modalVisible('logged out', isSuccess());
        goLogin();
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        modalVisible(errorMessage, isError());
      });
  });
  

  function watchUsers() {
    // wrapUsers.style.display = "block";
    // getEmails();
  }
  
  const user = auth.currentUser;
  onAuthStateChanged(auth, (user) => {
    if (user) {
      const uid = user.uid;
      const email = user.email;
    } else {
    }
  });
   
  /////////////////
}




//* Просмотр базы данных
export let allUsersEmail = [];
export let UsersAccounts = [];
export const emails = document.querySelector(".emails");

//* переходим на страницу, создаем БД
showUsers.addEventListener("click", () => {
  window.location.href = "users.html";
      createEmails();
      getEmails();
});

//* Достаем адреса пользователей из БД, преобразуем массив для дальнейшего рендера
export function createEmails() {
  const dbRef = ref(getDatabase());
  get(child(dbRef, `users/`)).then((snapshot) => {
    snapshot.forEach((child) => {
      child.val().email;
      allUsersEmail += " " + child.val().email;
      UsersAccounts = allUsersEmail.trim().split(" ");
    });
  });
}


//* Рендерим адреса пользователей
export function getEmails() {
  const ul = document.createElement("ul");
  for (let item in UsersAccounts) {
    let li = document.createElement("li");
    li.innerText = UsersAccounts[item];
    ul.appendChild(li);
  }
  emails.append(ul);
}

if (document.querySelector('.page-database')) {
  const wrapUsers = document.querySelector(".users");
  const goHome = document.querySelector(".goHome");
  const showDatabase = document.querySelector(".showDB");
  showDatabase.addEventListener("click", () => {
    createEmails();
    setTimeout(() => {
      getEmails();
    }, 1000);
  });

//* Кнопка выхода из базы данных
  goHome.addEventListener("click", () => {
    window.location.href = "/index.html";
    allUsersEmail = [];
    while (emails.firstChild) {
      emails.removeChild(emails.firstChild);
    }
  });




}

Тут можно потыкать
https://iwyse.github.io/LoginForm/

Answer 1

[Danya Wyse]

Ну пока тыкал, заметил что addEventListener вообще никакой код не обрабатывает при переходе на новую страницу, даже алерт не хочет показывать.
Я вот что сделал.
При переходе на страницу, сразу проверять где я нахожусь и тут же рендерить БД.
Получается такая же логика какую я и хотел сделать, но может кто то еще какие то варианты предложит

if (document.querySelector('.page-database')) {
  createEmails();
  setTimeout(() => {
    getEmails();
  }, 2000);
}