can't access a variable in outer function

Question

var _URL = window.URL || window.webkitURL;

var $file = FS.gID('failImage');

var imgSize = FS.gID('failImage');

var file, img, imgWidth, imgHeight;


if(file = imgSize.files[0]) {

 img = new Image();

    img.onload = function() {

        imgWidth = this.width;
        imgHeight = this.height;


    }

    img.src = _URL.createObjectURL(file);

}

 alert(imgWidth); //Comes out undefined.

Why can't I get this variable to alert the imgWidth? note that I didn't set the var inside the child function and yet in the parent function when I go to alert the imgWidth it comes back undefined?

because onload is asyncrhonous - stackoverflow.com/questions/14220321/… — Jaromanda X
– Jaromanda X, Commented Jul 30, 2017 at 5:44
since onload is asynchronous function, it is not executed in sequence. if you put the alert inside the onload, you will get the value. — Jibin.Jay
– Jibin.Jay, Commented Jul 30, 2017 at 5:49

Mohamed Abbas · Accepted Answer · 2017-07-30 05:49:56Z

1

Because img load after this line executed alert(imgWidth);

solution is to move alert(imgWidth); inside the onload function.

if (file = imgSize.files[0]) {

    img = new Image();

    img.onload = function () {

        imgWidth = this.width;
        imgHeight = this.height;

        alert(imgWidth); // This should work

    }

    img.src = _URL.createObjectURL(file);

}

Or use a callback function

function afterLoad(width, height) {
    alert(width);
    alert(height);
}

if (file = imgSize.files[0]) {

    img = new Image();

    img.onload = function () {

        imgWidth = this.width;
        imgHeight = this.height;

        afterLoad(imgWidth, imgHeight);

    }

    img.src = _URL.createObjectURL(file);

}

answered Jul 30, 2017 at 5:49

Mohamed Abbas

2,3081 gold badge14 silver badges19 bronze badges

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

5 Comments

Jon W Over a year ago

There is no other way I can make it so I can alert that variable in the parent function. I ask this because I want to put the width and height along with my other check that I go through down toward the bottom of the script. So it would be way easier if I could write if(imgWidth < blablahblah) rather then doing it in another fucntion. The greater purpose is not to just alert it but use it for a check to make sure the image passes my requirements.

Mohamed Abbas Over a year ago

@JonW i know that you put alert as example for explain. Anyway you can but your compare code in the afterLoad function. Ex: function afterLoad(width, height) { if(imgWidth < blablahblah) { ... } }

Jon W Over a year ago

Yeah problem with that is though if I put it inside the afterLoad() then the afterLoad child is the only one that has access to the width and the height. I just want to be able to set the imgWidth and imgHeight inside the parent function. But having to use onload forced me to put inside a child function. Just trying to figure out how I can then transfer back the results to the parent function.

Mohamed Abbas Over a year ago

@JonW " I just want to be able to set the imgWidth and imgHeight inside the parent function" you can not do that.

Mohamed Abbas Over a year ago

@JonW all your code that depend on the onload function contents should be inside it. (it = onload function)

Collectives™ on Stack Overflow

can't access a variable in outer function

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related