callback function with addeventlistener-CodePudding

I'm putting my addeventlistener function inside other appendingEvents function, cause some of the variables got created here. But i want to make my appendingEvents function not messy.

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);      
    });
    
  }
}

So i'm trying to make a function outside the appendingEvents functions, and just call it with addeventlistener function.

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);

}

How this is supposed to look like? Cause created function above doesn't work.

CodePudding user response：

addEventListener takes a function as its second argument. What you are doing is calling the deleteEvent function and putting the result of the function there instead.

You can create an anonymous function that gets triggered instead and call deleteEvent from within that. You can then pass whatever you want into it.

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);

}

CodePudding user response：

The event listener callback function has one argument that is passed: the event object. The easiest way to pass custom data is creating an anonymous function which invokes your function.

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) });
  }
}

An alternate solution is to use .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));
  }
}