Funciones en "nueva" creado objetos en Javascript

Siento el título que no sé cómo explicarlo de manera diferente. Creé una ventana emergente, hay un botón de cierre "x" en la parte superior derecha, avanzado y cierre en la parte inferior media. Después de hacer clic y reemplazar texto en HTML esos botones recién creados simplemente no funciona.

    let mda = document.getElementById("popup");

    document.addEventListener("DOMContentLoaded", () => { //show the pop up after loading the stie
       mda.style.display = "block";
    });

    const adv = document.querySelector(".adv");    //Advanced button
    let mdc = document.querySelector(".popup-content");   //Pop up content block that changes

    adv.onclick = () => {
      mdc.innerHTML =
        '' + ' ... ' +
        'Go back' + 
        'Go to site'; //Here it creates same button as before
       
// I thought since it has the same class name it would work but it doesn't,
// tried with simple onclick function but it doesn't work either.

      const back = document.querySelector(".back");
      back.onclick = () => {
        mdc.innerHTML =
   
          '' +
          'Advanced' + //creates adv button again but doesn't work
          'Go to site';
         
      };
    };
    
    const xbtn = document.querySelector(".close");
    const cbtn = document.querySelector(".closebtn");
    const close = () => {
      xbtn.onclick = () => {
        mda.style.display = "none";
      };
      cbtn.onclick = () => {
        mda.style.display = "none";
      };
    };
    close();

Intenté todo lo que pude encontrar, agregando onclick=() a los botones, addEventListener en lugar de funciones de clic... También una cosa extraña que está pasando es si uso getElementByClass o Id en lugar del selector de consultas esas funciones cercanas deja de funcionar... Por favor, ¿puede alguien guiarme cómo se supone que lo haga correctamente? BTW no puede usar bibliotecas.

Pregunta hecha hace 3 años, 4 meses, 27 días - Por nasean

2 Respuestas:

• El problema parece estar relacionado con la forma en que estás asignando los manejadores de eventos a los botones en tu código. Cuando creas los botones dentro de la constante mdc.innerHTML, estás reemplazando completamente el contenido HTML de mdc, lo que también elimina los manejadores de eventos previamente asignados.

  Para solucionar esto, podrías considerar asignar los manejadores de eventos después de agregar los elementos al DOM. Aquí te dejo una posible solución:

  • Quita la asignación directa de `onclick` a los botones dentro de `mdc.innerHTML`.

  • Después de establecer el contenido de `mdc`, busca los botones dentro de `mdc` y luego asigna los manejadores de eventos a los botones encontrados.

  Aquí te muestro cómo podrías modificar tu código para que funcione correctamente:

  javascript
  const adv = document.querySelector(".adv");
  let mdc = document.querySelector(".popup-content");
  
  adv.onclick = () => {
    mdc.innerHTML =
      '' + ' ... ' +
      'Go back' +
      'Go to site';
  
    const back = document.querySelector(".back");
    back.onclick = () => {
      mdc.innerHTML =
        '' +
        'Advanced' +
        'Go to site';
  
      const advBtn = document.querySelector(".adv");
      const closeBtn = document.querySelector(".closebtn");
      advBtn.onclick = () => {
        // Lógica al hacer clic en el botón de Advanced
      };
      closeBtn.onclick = () => {
        mda.style.display = "none";
      };
    };
  
    const closeBtn = document.querySelector(".closebtn");
    closeBtn.onclick = () => {
      mda.style.display = "none";
    };
  };
  
  const xBtn = document.querySelector(".close");
  const cBtn = document.querySelector(".closebtn");
  xBtn.onclick = () => {
    mda.style.display = "none";
  };
  cBtn.onclick = () => {
    mda.style.display = "none";
  };
  

  Este enfoque asegura que los manejadores de eventos se asignen después de que los elementos se agreguen al DOM, lo que garantiza que los botones recién creados tengan funcionalidad. Adicionalmente, he corregido la nomenclatura de las variables para seguir una convención de nombres más clara. ¡Espero que esta solución te ayude a solucionar el problema! ¡Déjame saber si tienes alguna otra pregunta!

  Respondida el Dec 19, 2020 a las 14:26 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema con tu código es que estás creando nuevos elementos HTML dinámicamente, pero no estás volviendo a adjuntar los manejadores de eventos a ellos. Esto se debe a que los manejadores de eventos se adjuntan a los elementos cuando se carga la página, y cuando creas nuevos elementos, estos no tienen ningún manejador de eventos adjunto.

  Para solucionar este problema, debes volver a adjuntar los manejadores de eventos después de crear los nuevos elementos. Aquí tienes el código actualizado:

  javascript
  const adv = document.querySelector(".adv");    //Advanced button
  let mdc = document.querySelector(".popup-content");   //Pop up content block that changes
  
  adv.onclick = () => {
    mdc.innerHTML =
      '' + ' ... ' +
      'Go back' + 
      'Go to site';
  
    // Vuelve a adjuntar los manejadores de eventos a los nuevos botones
    const back = document.querySelector(".back");
    back.onclick = () => {
      mdc.innerHTML =
        '' +
        'Advanced' +
        'Go to site';
    };
  };
  

  De esta manera, los manejadores de eventos se adjuntarán a los nuevos botones después de crearlos, y todo funcionará como se espera.

  Respondida el Dec 19, 2020 a las 14:31 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---