Question

When i say…

table[i].add(deleteButton) // this works…

// When i call inside an event listener… it’s says cannot call add of undefined.

imageLogo.addEventListener('click', function (e) {
        table[i].add(deleteButton);
    } else {
        imageLogo.backgroundImage = '/images/markHorizontal.png';
        table[i].remove(deleteButton);
    }
});

Answer 1

You’ve excluded some important code, but I’ll assume you’re in a for loop.

If so, the issue is that each click handler you’re creating in the loop is referencing the same i variable. This is because JavaScript (currently) does not have block scope. Only function scope.

You need to create a new variable scope for each i value in the loop that you want to persist.

function add_listener( i ) {
    imageLogo.addEventListener('click', function (e) {
            table[i].add(deleteButton);
        } else {
            imageLogo.backgroundImage = '/images/markHorizontal.png';
            table[i].remove(deleteButton);
        }
    });
}

for( var i = 0; i < table.length; i++ ) {

    add_listener( i );

}

By invoking a function in the loop, you’ve created a new variable scope. Because you passed i to that function, and created your handler in that function, the i that the function references is local to that scope, and will persist.

So when the handler is invoked, it is referring to the i that was created in the same variable scope where that particular handler was created.

---

There are other variations on the same concept. For example, you could have the function return a function to be used as the handler.

function make_listener( i ) {
    return function (e) {
            table[i].add(deleteButton);
        } else {
            imageLogo.backgroundImage = '/images/markHorizontal.png';
            table[i].remove(deleteButton);
        }
    };
}

for( var i = 0; i < table.length; i++ ) {

    imageLogo.addEventListener('click', make_listener( i ) );

}