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
– Krisztián Balla, Commented Oct 9, 2018 at 19:33
Also see here for a solution: stackoverflow.com/a/30479554/434742 — Krisztián Balla
– Krisztián Balla, Commented Oct 9, 2018 at 19:51
Possible duplicate of JavaScript closure inside loops – simple practical example — Krisztián Balla
– Krisztián Balla, Commented Oct 9, 2018 at 19:52

JLRishe · Accepted Answer · 2018-10-09 19:21:44Z

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 9, 2018 at 19:21

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

1 Comment

S. Ab Over a year ago

Elegant and to the point, this helped me with other problems I had too. Thank you!

Krisztián Balla · Accepted Answer · 2018-10-09 19:49:32Z

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/

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related