2

tengo un código del cual espero que al darle click al clicame muestre H y que al darle click al h se añada un hijo a clicame. El problema viene cuando hago más de un click sobre clicame, esperaba que solo se le añadiese un hijo al clicame, pero al ejecutarlo pasa otra cosa diferente:

document.querySelector('.no').addEventListener('click', añadir);
function añadir(e) {
  const x = document.querySelector('.h').style;
  const no = e.target;
  x.display = 'block';
  document.querySelector('.h').addEventListener('click', function () {añadirElemento(no);});
  function añadirElemento(no) {
    const sq = document.createElement('p');
    no.appendChild(sq);
    sq.textContent = 'Text';
  }
}
.h{
   display: none;
}
<div class="no">Clicame</div>
<div class='h'>H</div>

Lo que pasa esque no entiendo porqué al clicar sobre clicame se ejecuta lo de dentro de de la funcion añadirElemento tantas veces como he pulsado en clicame. Pienso que es porqué se le ha añadido más de una vez el addEventListener al elemento y por eso. Pero no estoy seguro. ¿Porqué pasa esto?

Muchas gracias!

3 respuestas 3

1

Si te fijas en el código, cada vez que haces click en .no, además de mostrar .h también esta agregando un listener a elemento.

Por poner un ejemplo: si haces click 5 veces en .no, entonces cuando hagas click en .h se van a crear 5 <p>.

Solución:

Mover el código que agrega el listener a '.h' fuera de la función añadir.

Ejemplo:

document.querySelector(".no").addEventListener("click", añadir);
document.querySelector(".h").addEventListener("click", añadirElemento);

let no;

function añadir(e) {
  const x = document.querySelector(".h").style;
  no = e.target;
  x.display = "block";
}

function añadirElemento() {
  const sq = document.createElement("p");
  no.appendChild(sq);
  sq.textContent = "Text";
}
.h {
  display: none;
}
<div class="no">Clicame</div>
<div class='h'>H</div>

2
  • Entonces según tu ejemplo si yo hago 5 clicks en .no agrega cinco veces el addEventListener a .h y por eso se crean 5 p nuevos?
    – Roberto
    Commented el 25 ene. 2023 a las 19:54
  • @Roberto, exactamente
    – Marcos
    Commented el 25 ene. 2023 a las 19:56
1

Lo que sucede es que tu código indica que la letra H (.h) tiene un listener a cada elemento, puedes remover el listener después de dar clic:

    document.querySelector('.no').addEventListener('click', añadir);
    function añadir(e) {
      const x = document.querySelector('.h').style;
      const no = e.target;
      x.display = 'block';
      document.querySelector('.h').addEventListener('click', function () {añadirElemento(no);});
      function añadirElemento(no) {
        const sq = document.createElement('p');
        no.appendChild(sq);
        sq.textContent = 'Text';
        //Remueve listener.
        document.querySelector('.h').removeEventListener('click', function () {añadirElemento(no);});
      }
    }
.h{
       display: none;
    }
 <div class="no">Clicame</div>
    <div class='h'>H</div>

1
  • 1
    Para poder remover un listener necesitas indicar la función por su nombre. Ejemplo: el.addEventListener('click', nombreFn); entonces podes hacer el.removeEventListener('click', nombreFn);
    – Marcos
    Commented el 25 ene. 2023 a las 19:54
1

Lo que sucede es que cada vez que haces clic en el elemento .no estás agregando un nuevo listener, de la cual el elemento .h se agregará las veces que el listener se repita.

Una solución sería separar los listener y las funciones, quedando así:

document.querySelector('.no').addEventListener('click', agregar);
document.querySelector('.h').addEventListener('click', agregarElemento);

function agregar() {
  const x = document.querySelector('.h').style;
  x.display = 'block';
}

function agregarElemento(e) {
  const no = e.target;
  const sq = document.createElement('p');
  no.appendChild(sq);
  sq.textContent = 'Text';
} 
.h {
  display: none;
}
<div class="no">Clicame</div>
<div class='h'>H</div>

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.