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!