0

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);
    }
});
1
  • You need more code. Where is i or table declared and initiated? Commented Aug 7, 2011 at 14:43

2 Answers 2

2

If you haven't prefixed the declaration to table with var you can do window.table[i].add(deleteButton); since all variables not declared with a var are descendants of window

Sign up to request clarification or add additional context in comments.

Comments

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

}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.