Javascript Set Dynamic Variables inside a For Loop Within addEventListener

Question

This code works great for me but I need the two variables inside the listener to be dynamic numbers representative of the item which you clicked. Right now of course they are hard coded to "7" but all I need is to make them dynamic.

var items = document.getElementsByClassName('largeItems');

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        var itemWays = 7;
        var currentItem = 7;
        document.getElementById('display').src = detailsImage[itemWays];
    }, false);
}

I guess I would like something like this:

var itemWays = this.items[i]; //this.itemIndex that was clicked
var currentItem = this.items[i]; //this.itemIndex that was clicked

Cheers,

If I had a dollar for every "my loop and closure doesn't work". — Evan Trimboli
– Evan Trimboli, Commented Nov 8, 2013 at 9:59
possible duplicate of Event handlers inside a Javascript loop - need a closure? — Quentin
– Quentin, Commented Nov 8, 2013 at 10:01

Paul Draper · Accepted Answer · 2013-11-08 10:01:05Z

The HTMLElement is this. The index i is a bit harder to capture, since it takes on a whole bunch of values during the for loop. Wrapping it in a function to "save" its value will work.

var items = document.getElementsByClassName('largeItems');

for (var i = 0; i < items.length; i++) {
    (function(i) {
        items[i].addEventListener('click', function() {
            var itemWays = i;
            var currentItem = this;
            document.getElementById('display').src = detailsImage[itemWays];
        }, false);
    })(i);
}

If you are not using IE8 or below, do

Array.prototype.forEach.call(document.getElementsByClassName('largeItems'), function(item, i) {
    item.addEventListener('click', function() {
        var itemWays = i;
        var currentItem = this;
        document.getElementById('display').src = detailsImage[itemWays];
    });
});

Collectives™ on Stack Overflow

Javascript Set Dynamic Variables inside a For Loop Within addEventListener

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related