Javascript Set Dynamic Variables inside a For Loop Within addEventListener

bo_

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,

Paul Draper

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Dynamic created variables inside for loop, Javascript

Variable variables in JavaScript within a loop

addEventListener within a loop

Modify variables inside a for loop within a function

Loop with addEventListener is not dynamic for function()

AddEventListener in loop for dynamic soundbar

Create dynamic scope variables in AngularJs inside loop

JavaScript: How to set a parent object as a parameter within an addEventListener function?

registering global variables with javascript within a loop

Displaying PHP variables within Javascript loop

For loop inside of Javascript dynamic Html content in Django

Loop, closure and addEventListener in Javascript

Javascript set up Timeout Functions within a for loop

addEventListener not working as intended inside for loop

Using variables inside javascript for loop few times

JavaScript variables declare outside or inside loop?

Why Javascript addEventlistener not working inside another addEventlistener

Jmeter - How to assign multiple dynamic values to a variables inside a loop

How to declare dynamic variables inside FOR loop in OR-TOOLS

how to set two variables for a for loop - Javascript

Enclosing variables within for loop

Constructing variables within a for loop

Javascript/JS - Referring to classes and variables dynamically within a change event loop

For loop within a for loop? - Javascript

Creating dynamic Django Template Variables inside Javascript script tag

Dynamic Variables in loop

Javascript loop for dynamic variables (and values) from array without eval

Powershell: dynamic variables within foreach

Using "dynamic variables" within a function