Javascript and jQuery arrays undefined

Question

I've tried to setup an array, but when i use console.log(array_name), it prints the number of the counter (x), instead of printing the path of the image. The undefined presents itself once I tried to use console.log(img[x]) to check if the content of the variable, it's the source of the image. But since img doesn't work either, I don't have any clue of what is going on.

$(window).on('load', function(){
    var x = 0;
    var img = [];
        $(".gallery_img").each(function(img){
            var image = new Image();
            image.src = $(this).attr("src");
            x = x + 1;
            img[x] = image.src;
            console.log(img);
            console.log($(this).attr("src"));

I'm pretty new to jquery and javascript, so I'd be very grateful for some specific explanation and not just solution. I hope I've been specific enough, and not a duplicate

what do you get when you log "image" and "image.src"..? I hope it is "undefined"..? — Nomesh DeSilva, Sep 16 '15 at 03:01
@Nomesh DeSilva for the image one i get: instead for the image.src: "file:///X:/portfolio/lavori/car_wip.png" which is the same of $(this).attr("src"); of course — Zeus, Sep 16 '15 at 03:06
Where's the rest of the function? You're missing the last half of it. — Alexis Tyler, Sep 16 '15 at 03:13

Dyrandz Famador · Accepted Answer · 2015-09-16T04:04:00.707

3

try to rename your array variable var img = []; to something like var imgs = [];

because you're using the same variable in your function here:

$(".gallery_img").each(function(img)..

Added from @guest271314 's comment.

The reason why it's printing the count instead of the path because the first parameter within .each(index, element) is index of element within collection of elements

edited Sep 16 '15 at 04:04

answered Sep 16 '15 at 03:07

Dyrandz Famador

4,499
5
25
40

ok, i just tried what you said(it's working fine), didn't know it could do conflict, but so i can't use a global var as parameter in a function of jquery like that? Or it's just messy to deal with?(just wondering) – Zeus Sep 16 '15 at 03:17
you can have the same name then use `window.varname` to address it that you're using the global var inside that function.. but to be safe, use different variable name . [Access overridden global variable inside a function](http://stackoverflow.com/questions/15826751/access-overridden-global-variable-inside-a-function) – Dyrandz Famador Sep 16 '15 at 03:51
1

@Zeus The first parameter within `.each(index, element)` is index of element within collection of elements – guest271314 Sep 16 '15 at 03:54

score 0 · Answer 2 · answered Sep 16 '15 at 03:14

You're incrementing your array before it has a chance to add an image to index 0.

$(window).on('load', function(){
var x = 0;
var img = [];
    $(".gallery_img").each(function(img){
        var image = new Image();
        image.src = $(this).attr("src");
        x = x + 1; //<- x becomes 1
        img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began.
        console.log(img);
        console.log($(this).attr("src"));

Try changing your code to this.

 $(window).on('load', function(){
var x = 0;
var img = [];
    $(".gallery_img").each(function(img){
        var image = new Image();
        image.src = $(this).attr("src");
        img[x++] = image.src; //this will increment x after the value x is used.
        console.log(img);
        console.log($(this).attr("src"));

score 0 · Answer 3 · edited May 23 '17 at 10:27

Well, while you think you passing your declared array to the anonymous function in fact you defining new local variable img with this code:
.each(function(img){}) that only can be seen inside this new anonymous function
Because this function is a callback that should have input parameters, that will be passed by each() function: jQuery.each( array, callback )

Now what you did, you have defined your array img in scope of function:
$(window).on('load', function(){..});
And then defined one more variable as input parameter that will be used inside this function scope:
$(".gallery_img").each(function(img){..});
I guess you was trying to pass this variable to this function, but this is unnecessary, since you already declared it in more wider scope and this variable already available in function scope.
Truth about javascript variable scopes

When you defined this variable as a callback function parameter, you acquire your new local variable img that gets index of the match as a value and your array img become unavailable inside this function.

So what you had to do actually:

$(window).on('load', function(){
  var x = 0;
  var img = [];
    $(".gallery_img").each(function(ind, val){
      var image = new Image();
      image.src = $(this).attr("src");
      // Unnecessary, we already have index - ind, unless you use some filtering.
      // So you could get rid of x variable and use ind instead, like img[ind] = image.src
      x = x + 1; //<- x becomes 1
      img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began.
      console.log(img);
      console.log($(this).attr("src"));

Also I advice you to get used to jsfiddle to setup your sample code, that will help you to debug your code and us to help with your actual sample.

Javascript and jQuery arrays undefined

3 Answers3