javascript variable doesnt work as expected

Question

i'm trying to get the width of an image but it it always undefine. here is the part of the code

var w;

var _URL = window.URL || window.webkitURL;
var img = new Image();
img.src = _URL.createObjectURL(files[i]);
img.onload = function  () {
    w = this.width;
    console.log(w); // works
};

console.log(w); // undefined

and i notice the the last console log are being called first, and not the console inside a function(), is it the correct behavior? because i thought that it will call a function line by line.

if i input 4 files, the result will be 4 undefined first, then the actual width of the image.

onload is called asynchronously, when the image loads ... w will be undefined until that occurs, your code outside the onload function doesn't wait for the image to load — Jaromanda X
– Jaromanda X, Commented Jan 14, 2017 at 5:48
@JaromandaX so how can i get the value of this.width and use it outside the onload — markoverflow
– markoverflow, Commented Jan 14, 2017 at 5:49
simple answer, you can't, complex answer, learn how to use asynchronous code using either callbacks or promises — Jaromanda X
– Jaromanda X, Commented Jan 14, 2017 at 5:50
@markoverflow you need to use a callback. You can call functions inside the onload to use your width variable or just put stuff in the onload. You could alternatively just predict the image width based on how it is styled or what not (not sure what the use case is). — vkoves
– vkoves, Commented Jan 14, 2017 at 5:51

Ataur Rahman Munna · Accepted Answer · 2017-01-14 05:51:55Z

2

JavaScript execute line by line. img.onload function also invoked when the image loaded that means it's asynchronous. but in the mean time console.log(w); executes as it's synchronous and not dependent on img.onload function.If you declare w variable at first then it would not print undefined.

answered Jan 14, 2017 at 5:51

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

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

Comments

M14 · Accepted Answer · 2017-01-14 05:51:49Z

0

Javascript is asynchronous and you cannot call console.log(w) outside the onload

onload func will execute asynchronously

http://www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/

answered Jan 14, 2017 at 5:51

M14

1,8102 gold badges17 silver badges33 bronze badges

Comments

damianfabian · Accepted Answer · 2017-01-14 05:56:07Z

0

var w;//Global variable (avoid this)
    
    var _URL = window.URL || window.webkitURL;
    var img = new Image();
    img.src = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e';
    img.onload = function  () {
        w = this.width;
        console.log('inside function:'+w); // works
    };
    document.getElementById('content').appendChild(img)
    console.log('outside function:'+w); // Because this happens before the onload function get called

<html>
  <body>
    <div id="content"></div>
    </body>
  </html>

answered Jan 14, 2017 at 5:56

damianfabian

1,66312 silver badges17 bronze badges

Comments

ibrahim mahrir · Accepted Answer · 2017-01-14 06:06:47Z

0

img.onload = fun... just register the function to the load event and pass for the next instruction. The function is called when the load event is emitted, that's after the later console.log(w) been executed with undefined value of w. You should read about Syncronous and Asynchronous calls.

answered Jan 14, 2017 at 6:06

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Collectives™ on Stack Overflow

javascript variable doesnt work as expected

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related