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 ) );
}
iortabledeclared and initiated?