0

This is i am currently working on:

images = doc.data().imgs;
linkZips = doc.data().zips;

for (i = 0, len = images.length; i < len; i++) {

    for (x = 0, lens = linkZips.length; x < lens; x++){
        $(".downloadZip"+x).click(function(){
            console.log(linkZips[x]);
        });
      };

    $("#allgames").append(`
        <div class="col">
            <a class="downloadZip`+i+`">
                <div class="card mb-4 text-center">
                    <img src="`+ images[i] +`">
                </div>
            </a>
        </div>

    `);

}

I am a bit of a noob when it comes to javascript, but I cannot seem to find the reason why this is returning "undefined"

for (x = 0, lens = linkZips.length; x < lens; x++){
    $(".downloadZip"+x).click(function(){
        console.log(linkZips[x]);
    });
};
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Kdydeme
  • 7
  • 1
  • It is `undefined` because by the time you click, the loop is already finished and `x` will be the value of `linkZips.length` (one above the last index). – Ivar Jul 03 '20 at 23:28
  • You seem to have the index encoded into the class name. So why not give all those elements a single handler, then parse it out of that class name? Or better, give each element a `data-` attribute. Unless there's another reason why you want incremented classes, I'd say `data-` attributes are the way to go. –  Jul 03 '20 at 23:37

0 Answers0