Estoy poniendo mi función addeventlistener dentro de otra función appendingEvents, porque algunas de las variables se crearon aquí. Pero quiero que mi función appendingEvents no sea desordenada.
function appendingEvents() { for (let i = 0; i < eventFullInfo.title.length; i++) { let classes = document.querySelector(eventFullInfo.class[i]); document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", function () { classes.innerHTML = ""; eventFullInfo.class.splice(i, 1); eventFullInfo.title.splice(i, 1); eventFullInfo.date.splice(i, 1); eventFullInfo.type.splice(i, 1); eventFullInfo.desc.splice(i, 1); eventFullInfo.etime.splice(i, 1); eventFullInfo.stime.splice(i, 1); }); } }Así que estoy tratando de hacer una función fuera de las funciones appendingEvents, y simplemente llamarla con la función addeventlistener.
function appendingEvents() { for (let i = 0; i < eventFullInfo.title.length; i++) { let classes = document.querySelector(eventFullInfo.class[i]); document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", deleteEvent(classes, i); } } function deleteEvent(classes, i) { classes.innerHTML = ""; eventFullInfo.class.splice(i, 1); eventFullInfo.title.splice(i, 1); eventFullInfo.date.splice(i, 1); eventFullInfo.type.splice(i, 1); eventFullInfo.desc.splice(i, 1); eventFullInfo.etime.splice(i, 1); eventFullInfo.stime.splice(i, 1); }¿Cómo se supone que debe verse esto? Porque la función creada arriba no funciona.
addEventListener toma una función como su segundo argumento. Lo que está haciendo es llamar a la función deleteEvent y colocar el resultado de la función allí.
Puede crear una función anónima que se active en su lugar y llamar a deleteEvent desde allí. A continuación, puede pasar lo que quiera en él.
function appendingEvents() { for (let i = 0; i < eventFullInfo.title.length; i++) { let classes = document.querySelector(eventFullInfo.class[i]); document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", () => { deleteEvent(classes, i) }) } } function deleteEvent(classes, i) { classes.innerHTML = ""; eventFullInfo.class.splice(i, 1); eventFullInfo.title.splice(i, 1); eventFullInfo.date.splice(i, 1); eventFullInfo.type.splice(i, 1); eventFullInfo.desc.splice(i, 1); eventFullInfo.etime.splice(i, 1); eventFullInfo.stime.splice(i, 1); }La función de devolución de llamada del detector de eventos tiene un argumento que se pasa: el objeto de evento. La forma más sencilla de pasar datos personalizados es crear una función anónima que invoque su función.
function appendingEvents() { for (let i = 0; i < eventFullInfo.title.length; i++) { let classes = document.querySelector(eventFullInfo.class[i]); document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", function(){ deleteEvent(classes, i) }); } }Una solución alternativa es usar .bind() .
function appendingEvents() { for (let i = 0; i < eventFullInfo.title.length; i++) { let classes = document.querySelector(eventFullInfo.class[i]); document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", deleteEvent.bind(null, classes, i)); } }