1

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.

0

1 respuesta 1

1

A veces puede resultar complicado trabajar con elementos dinámicos que pueden estar presentes y después desaparecer, o no estar y ser generados posteriormente.

Para esto, se usa la "delegación de eventos", que, en términos simples, es asignar el evento a otro contenedor (generalmente el documento), analizar dónde se "disparó" y las acciones a realizar:

document.addEventListener('click', (e) => {
    // e es el evento, e.target es el elemento que lo disparó
    if(e.target.classList.contains('cerrarSesion')) {
        // Llamar a la función para cerrar sesión aquí
    }
    if(e.target.classList.contains('registerButton')) {
        // Llamar a la función para registrar aquí
    }
    if(e.target.classList.contains('loginButton')) {
        // Llamar a la función para iniciar sesión aquí
    }
});

Otra cosa que puedes hacer, es analizar si existe el botón para asignar la función que corresponda:

const MainController = ((Auth, UI) => {
  const setupEventListeners = () => {
    const DOMTags = UI.DOMTags();
    setupSingle(DOMTags.loginForm, 'submit', login);
    setupSingle(DOMTags.logout, 'click', logout);
  };
  const setupSingle = (selector, e, func) => {
      if(document.querySelector(selector)) {
          document.querySelector(selector).addEventListener(e, func);
      }
  };

return {
    init: () => {
      console.log("La aplicación se ha iniciado exitosamente");
      validateUser();
      setupEventListeners();
    },
  };
})(AuthController, UIController);

Todavía se pueden hacer mejoras si declaras DOMTags con arreglos:

    function login() {}
    function register() {}
    function logout() {}
    function emailValidate() {}
    function passwordValidate() {}

    const DOMTags = {
        // Elemento: [selector, evento, función]
        loginForm: ["#form_login", 'submit', login],
        botones: [".botones"], // Este no tendrá evento ni función
        registerForm: ["#form_register", 'submit', register],
        submitButton: [".button__submit", 'click', register],
        activeCard: [".active_card"],
        logout: [".cerrarSesion", 'click', logout],
        email: [".email", 'change', emailValidate],
        password: [".password", 'change', passwordValidate],
        logoLink: [".logo__link"]
    };

      const setupEventListeners = () => {
        // const DOMTags = UI.DOMTags();
        for(let tag in DOMTags) {
            let curTag = DOMTags[tag];
            if(curTag[1] && curTag[2]) {
                setupSingle(curTag[0], curTag[1], curTag[2]);
            }
        }
      };
      const setupSingle = (selector, e, func) => {
          console.log(selector, e, func);
          if(document.querySelector(selector)) {
              document.querySelector(selector).addEventListener(e, func);
          }
      };
      setupEventListeners();

2
  • Hola Triby si me funcionó. Muchas gracias por las opciones y soluciones. Lo que finalmente implementé fue la primera opción como un como un inicializador para no tener que hacer muchos if o switch, lo que hice fue una funcion para utilizarla cada vez que requiera comprobar el evento. Muy similar a la segunda opción que me planteaste.
    – Danielnr
    el 26 ago. 2020 a las 0:31
  • @Danielnr, me alegra que te haya funcionado, no olvides marcar la respuesta como aceptada.
    – Triby
    el 26 ago. 2020 a las 0:37

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.