Why can't i access the x variable of the bitmap? (javascript)

Question

I'm trying to loop through 3 images in my array and add it to the stage (using easelJS). I want to position it as well. When I try to access the images in the array i get an error saying that the I can't set x of undefined. Why can't the x variable of the easeljs Bitmap be accessed?

function displayPosters() {

    getPosters(); //get all images and assign it to designated array

            console.log(frontPosters);
            console.log(frontPosters.length);

    if(currentCat == Category.HOME) { //if current category is HOME

        for(var i = 0; i < frontPosters.length; i++) { //loop through posters

            frontPosters[i].x = 40; //set x position for testing, also where error occurs
            stage.addChild(frontPosters[i]); //add poster to stage

        }

    }

}

here is the code for loading and pushing those images into the frontPosters arrray.

var frontPosters = new Array(3);

function getPosters() {

    var games = new Image(); //create 3 images
    var apps = new Image();
    var aboutme = new Image();

    games.onload = function() { //add image to frontImages array on load

        var gamesPost = new createjs.Bitmap(games);
        frontPosters[0] = gamesPost;

    };

    apps.onload = function() {

        var appPost = new createjs.Bitmap(apps);
        frontPosters[1] = appPost;

    };

    aboutme.onload = function() {

        var amPost = new createjs.Bitmap(aboutme);
        frontPosters[2] = amPost;

    };

    games.src = "images/assets/posters/games_poster.jpg"; 
    apps.src = "images/assets/posters/apps_poster.jpg";
    aboutme.src = "images/assets/posters/aboutme_poster.jpg";

}

iMoses · Accepted Answer · 2013-02-22T00:09:16.767

Using for(poster in frontPosters) is bad practice, because you're actually iterating over the Array Object and not the values (a.k.a. the Array itself). Use for(var i=0; i<frontPosters.length; i++) instead. It's the easiest solution, IMO.

for(var i = 0; i < frontPosters.length; i++) { //loop through posters
    frontPosters[i].x = 40; //set x position for testing, also where error occurs
    stage.addChild(frontPosters[i]); //add poster to stage
}

Edit

I think you are dealing with a race-condition. You are going over your array before all images were loaded. By setting var frontPosters = new Array(3); you automatically set three values to undefined which are pushed into the new array.

You should check that all images were loaded before proceeding with the script.

Here's an idea for you. Set a callback that will run only after the third image was loaded.

var frontPosters = new Array(3);

function getPosters(callback) {

    var games   = new Image(),
        apps    = new Image(),
        aboutme = new Image(),
        loaded  = 0;

    games.onload = function() {
        frontPosters[0] = new createjs.Bitmap(this);
        if (++loaded === 3) callback();
    };

    apps.onload = function() {
        frontPosters[1] = new createjs.Bitmap(this);
        if (++loaded === 3) callback();
    };

    aboutme.onload = function() {
        frontPosters[2] = new createjs.Bitmap(this);
        if (++loaded === 3) callback();
    };

    games.src   = "images/assets/posters/games_poster.jpg"; 
    apps.src    = "images/assets/posters/apps_poster.jpg";
    aboutme.src = "images/assets/posters/aboutme_poster.jpg";

}

function displayPosters() {

    getPosters(function() {
        if(currentCat == Category.HOME) { //if current category is HOME
            for(var i = 0; i < frontPosters.length; i++) { //loop through posters
                frontPosters[i].x = 40; //set x position for testing, also where error occurs
                stage.addChild(frontPosters[i]); //add poster to stage
            }
        }
    }); //get all images and assign it to designated array, only after all images were loaded

}

the problem is that when i do "frontPosters[0].x = 40;" or something like that, the error still occurs. — kag359six, Feb 21 '13 at 23:50
Then I'm afraid it's impossible to help you as long as we have no idea what `frontPosters` contains. You could try adding `console.log(frontPosters);` before the `for` loop, then open your dev-tools (or firebug) console and see what the array contains. If it doesn't clarify things add it to your original post, at least we'll know what we're dealing with. — iMoses, Feb 21 '13 at 23:51
i said it contained 3 images. but if it helps I'll post the code that handles those images. — kag359six, Feb 21 '13 at 23:53
If you get `can't set x of undefined` then it's either not contains what you think it contains or this is not the origin of the error. This is my analysis :) — iMoses, Feb 21 '13 at 23:56
You're right their isn't anything in them when I use console.log, but for some reason it says that it contains 3 objects when I do console.log(frontPosters.length); — kag359six, Feb 21 '13 at 23:58
Because you've set it to three values when initiating the array :) I've edited my answer, btw. — iMoses, Feb 22 '13 at 00:02
Hope my example helps. Let me know if you have any questions — iMoses, Feb 22 '13 at 00:13

Why can't i access the x variable of the bitmap? (javascript)

1 Answers1