Delete Function Gets Called Before Button Exists

I've had this issue before, essentially I'd like to keep everything my app separate i.e caching the dom, binding events, no html in javascript etc. I have an issue where in my bind

Solution 1:

You should be bind()ing your event handler functions to their scope when they're defined, not when they're setup as listeners.

bindEvents: function() {
    this.addToDo.addEventListener("click", this.add);
    this.deleteToDo.addEventListener("click", this.delete);
},
add: function() {
    // ...
}.bind(this),
delete: function() {
    // ...
}.bind(this),

Solution 2:

At first, you may just try to get Elements after onload:

window.addEventListener("DOMContentLoaded",toDo.init.bind(toDo));

And you could listen at window for all clicks, then filter them:

window.addEventListener("click",function(evt){
 var el = evt.target;
 do {
   if(el.classList.contains("someclass")){
     somefunc.call(el);
    }
 } while ( el = el.parentElement);
});

Solution 3:

I would remove the deletetodo caching and event assignment from the init procedure (which is always going to be null anyway) and listen for the event when the button is added instead.