Estoy realizando un modelo de login con firebase simple con Javascript Vanilla, pero bien estructurado. La idea es que dinámicamente me muestre el boton para cerrar la sesión y actualmente se muestra, pero como se añade dinamicamente con Javascript no encadenar el evento para poder cerrar la sesión del usuario:
Código del Controlador del DOM:
const UIController = (() => {
const DOMTags = {
loginForm: "#form_login",
botones: ".botones",
registerForm: "#form_register",
submitButton: ".button__submit",
activeCard: ".active_card",
logout: ".cerrarSesion",
email: ".email",
password: ".password",
logoLink: ".logo__link",
};
const showButtons = (user) => {
let html;
if (!user) {
html = `
<a href="#" class="button button__red registerButton">Registrarse</a>
<a href="#" class="button button__green loginButton">Acceder</a>
`;
} else {
html = `
<a href="#" class="button button__red cerrarSesion">Cerrar Sesión</a>
`;
showUser(user.email);
}
innerHTML(DOMTags.botones, html);
};
const innerHTML = (tag, content) => {
document.querySelector(tag).innerHTML = content;
};
return {
init: (user) => {
showButtons(user);
},
DOMTags: () => {
return DOMTags;
}
};
})();
Controlador principal
const MainController = ((Auth, UI) => {
const setupEventListeners = () => {
const DOMTags = UI.DOMTags();
console.log(document.querySelector(DOMTags.logout));
document.querySelector(DOMTags.loginForm).addEventListener("submit", login);
document.querySelector(DOMTags.logout).addEventListener("click", logout);
};
return {
init: () => {
console.log("La aplicación se ha iniciado exitosamente");
validateUser();
setupEventListeners();
},
};
})(AuthController, UIController);
MainController.init();
El setupEventListener()
lo que arroja es null para el evento del boton de cerrarSesion, ya que dice que no existe que no encuentra y no puede encadenar el evento.
Gracias.