JavaScript not running when the page is loaded`

Question

I have a html file and has a div containing a image src

<div id="imageoutput"><img id="imgoutput" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA"></div>

I ignored some of the Base64 data here because it is too long, just for your convenience to read the code.

So I have a javascript file included in the HTML.

document.onload = function () {
    var existingData = document.getElementById('imgoutput').src;
}

I wanna get the src for this image when the page is loaded, but seems like when I

console.log(existingData)

it will give me this error all the time

Uncaught ReferenceError: existingData is not defined

but if I do

console.log(document.getElementById('imgoutput').src)

It will give me the image src

EDIT

If I did this all wrong, what is the possible way to get the image src out and store it in a variable?

Answer 1

If you did console.log(existingData) just by going to your page, opening dev tools, and typing it, then the reason for the error is simple: It will be looking for a global variable, and existingData isn't a global, you've defined it as local within your onload function.

If you put a breakpoint in your onload function in dev tools, reload the page so that it stops on that breakpoint, and run the console.log, at that point the console will have access to the things in scope for the code where the breakpoint is and you'll see the value.

If you actually write the console.log in your onload function — more generally, if you only use existingData within that function — it'll be defined and (after the assignment) have a value.

Depending on how/where you want to use it, the answers to this question may be useful as well: How do I return the response from an asynchronous call?

Answer 2

As others have mentioned in the comments/answers already posted, the problem with your approach is both scope and timing. JavaScript is function scoped, meaning the variable existingData will not be available outside of the window.onload function scope. You can get around this by elevating the variable to the global scope by moving the var existingData; declaration outside of the function.

The second problem is timing. The onload function is an async operation meaning a simple console.log outside of the window.onload function declaration will still yield a result of undefined because the async operation has not completed. To get around this, you can use the native implementation of Promise and the provided .then() callback to accomplish what you're looking for.

DEMO:

var existingData; 

function load(){
    return new Promise(function(resolve) {
        if (document.readyState === "complete") {
            existingData = document.querySelectorAll("img")[0].src;
            return resolve();
        }
        document.addEventListener("DOMContentLoaded", function () {
            existingData = document.querySelectorAll("img")[0].src;
            return resolve();
        }, false);
    });
}

load().then(function () {
    alert(existingData);
});

<img src="http://stackexchange.com/content/img/hero/vote.png" />

NOTE: Promises are not supported in IE so you may need to use a library that abstracts this functionality safely and provides a fallback for browsers with non-native support.

Answer 3

Probably the error comes from somewhere else, because you're using the existingData variable but the variable is set in the onload scope, so is not reachable.

You should put the var declaration on the root:

var existingData
document.onload = function () {
    existingData = document.getElementById('imgoutput').src;
}

EDIT

This allows you to reach the variable, you should call your method inside the onload:

   var existingData
    document.onload = function () {
        existingData = document.getElementById('imgoutput').src;
        callmMyMethod();
    }