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
    Commented el 26 ago. 2020 a las 0:31
  • @Danielnr, me alegra que te haya funcionado, no olvides marcar la respuesta como aceptada.
    – Triby
    Commented el 26 ago. 2020 a las 0:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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