CODEWITHSUNDEEP
javascriptarrayspositioneaseljs
kag359six
kag359six

Reputation: 2263

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

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";

}

Upvotes: 0

Views: 280

Answers (1)

iMoses
iMoses

Reputation: 4348

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

}

Upvotes: 1

Related Questions