How can I dynamically attach click event listeners based on an array?

Question

Okay... please don't hate me for how disgusting this code looks, but I'm trying to optimize it. I want to rerun the property for each set of variables in my two arrays but I can't seem to get it to work. I have also tried other things such as using for loop, but that had no luck as well. Can anyone possibly guide me to some resources that could help me better understand what I could do here?

This is the original code:

<script>
$('.selectTrackThree').click(function(){
    selectFinal(".selectTrackThree", "#trackThreeDiv");
});
$('.selectTrackFour').click(function(){
    selectFinal(".selectTrackFour", "#trackFourDiv");
});
$('.selectTrackFive').click(function(){
    selectFinal(".selectTrackFive", "#trackFiveDiv");
});
$('.selectTrackSix').click(function(){
    selectFinal(".selectTrackSix", "#trackSixDiv");
});
$('.selectTrackSeven"').click(function(){
    selectFinal(".selectTrackSeven", "#trackSevenDiv");
});
$('.selectTrackEight').click(function(){
    selectFinal(".selectTrackEight", "#trackEightDiv");
});
$('.selectTrackNine').click(function(){
    selectFinal(".selectTrackNine", "#trackNineDiv");
});
$('.selectTrackTen').click(function(){
    selectFinal(".selectTrackTen", "#trackTenDiv");
});
$('.selectTrackEleven').click(function(){
    selectFinal(".selectTrackEleven", "#trackElevenDiv");
});
$('.selectTrackTwelve').click(function(){
    selectFinal(".selectTrackTwelve", "#trackTwelveDiv");
});
$('.selectTrackThirteen').click(function(){
    selectFinal(".selectTrackThirteen", "#trackThirteenDiv");
});
$('.selectTrackFourteen').click(function(){
    selectFinal(".selectTrackFourteen", "#trackFourteenDiv");
});
$('.selectTrackFifteen').click(function(){
    selectFinal(".selectTrackFifteen", "#trackFifteenDiv");
});
$('.selectTrackSixteen').click(function(){
    selectFinal(".selectTrackSixteen", "#trackSixteenDiv");
});
$('.selectTrackSeventeen').click(function(){
    selectFinal(".selectTrackSeventeen", "#trackSeventeenDiv");
});
</script>

This is my attempt of optimizing it using a for loop:

<script>
var index;
var a = [".selectTrackOne", ".selectTrackTwo"];
var b = ["#trackOneDiv", "#trackTwoDiv"];
for (index = 0; index < a.length; ++index) {
    $(a[index]).click(function(){
        selectFinal(a[index], b[index]);
    });
});
</script>

Could there be a typo in your code? The `);` before the closing `script` tag seems to be out of place. — Krisztián Balla, Oct 09 '18 at 19:33
Duplicate of https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Barmar, Oct 09 '18 at 19:50
Also see here for a solution: https://stackoverflow.com/a/30479554/434742 — Krisztián Balla, Oct 09 '18 at 19:51
Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Krisztián Balla, Oct 09 '18 at 19:52

score 2 · Accepted Answer · answered Oct 09 '18 at 19:21

2

It looks like you don't need two arrays. Just one - a list of numbers spelled out.

Give the following a whirl:

var numbers = ['One', 'Two', 'Three'];

numbers.forEach(function (number) {
    $('.selectTrack' + number).click(function () {
        selectFinal('.selectTrack' + number, '#track' + number + 'Div');
    });
});

answered Oct 09 '18 at 19:21

JLRishe

99,490
19
131
169

Elegant and to the point, this helped me with other problems I had too. Thank you! – S. Ab Oct 09 '18 at 20:05

Krisztián Balla · Answer 2 · 2018-10-09T19:49:32.100

Let's look at your attempt here:

var index;
var a = [".selectTrackOne", ".selectTrackTwo"];
var b = ["#trackOneDiv", "#trackTwoDiv"];
for (index = 0; index < a.length; ++index) {
    $(a[index]).click(function(){
        selectFinal(a[index], b[index]);
    });
};

The problem with this is that the variable index is the same for each closure created by your event listeners. So the value of index is always the same after the loop has ended. The value of index for every call to selectFinal is going to be 2 and a[2] as well as b[2] is undefined.

To fix this simply change your loop like this:

for (let index = 0; index < a.length; ++index) {
    $(a[index]).click(function(){
        selectFinal(a[index], b[index]);
    });
};

Here we are using a block scoped variable declared with let, resulting in the correct value being used inside each event listener.

You can find more on let vs. var and closures here: http://www.jstips.co/en/javascript/keyword-var-vs-let/

How can I dynamically attach click event listeners based on an array?

2 Answers2