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 - https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Jaromanda X, Jul 30 '17 at 05: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, Jul 30 '17 at 05:49

score 1 · Answer 1 · answered Jul 30 '17 at 05:49

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 '17 at 05:49

Mohamed Abbas

2,228
1
11
19

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. – Jon W Jul 30 '17 at 05:58
@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) { ... } } ` – Mohamed Abbas Jul 30 '17 at 06:09
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. – Jon W Jul 30 '17 at 06:20
@JonW " I just want to be able to set the imgWidth and imgHeight inside the parent function" you can not do that. – Mohamed Abbas Jul 30 '17 at 07:39
@JonW all your code that depend on the `onload` function contents should be inside it. (it = `onload` function) – Mohamed Abbas Jul 30 '17 at 07:41

can't access a variable in outer function

1 Answers1