0

Mucho gusto. Desde hace unos dias estoy aprendiendo a usar javascript y tengo bastantes dudas.

En html cree el siguiente div:

<div class="calendar__dates" id="dates"></div>

y en javascript cree un for que me genera los dias del mes, tal que asi

let dates = document.getElementById('dates');

for(let i=1; i<=31; i++){
    dates.innerHTML += ` <div class="calendar__date calendar__item">${i}</div>`;
}

De tal manera que se me generan los 30 numeros de manera exitora...

Lo que quiero hacer es que CADA numero se genere con su propio addEventListener, para que al darle click me pueda abrir su "menú",

Teniendo la funcion:

function openDayMenu(day){
   ...etc
}

El problema es como hacer que cada numero se genere con su EventListener al ser creado. Pues no se como incorporarselo.

Pensaba en tal vez meterle el addEventListener tal que asi:

for(let i=1; i<=31; i++){
    dates.innerHTML += ` <div class="calendar__date calendar__item">${i}</div>`;
    dates.addEventListener("click", openDayMenu(i));
}

Pero pues obvio no resulta hacerlo así, ya que sí añade EventListener, pero le añade solo uno a todos los numeros generados (del 1 al 30), y no a cada uno su Listener.

¿Como puedo agregar el EventListener a cada uno al ser generado?

1 respuesta 1

1

Lo que podrias hacer es agregar en el evento onclick de tu componente la llamada a la función openDayMenu(), y pasandole como parametro tu contador, en este caso i, de esta manera:

for(let i=1; i<=31; i++){
    dates.innerHTML += ` <div class="calendar__date calendar__item" onclick='openDayMenu(${i})'>${i}</div>`;
}
1
  • 1
    Muchas Gracias! Era Justo lo que necesitaba! No pasó por mi mente hacer eso jaja. Te lo agradezco Commented el 20 jul. 2021 a las 0:57

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.