JavaScript - How to take variable that defined inside onload function outside?

Question

I want to get all input element in html page. I've tried this:

window.onload = function(){
    input = document.querySelectorAll("input");
}

But, when I check it with alert function outside onload, it doesn't do anything

alert(input.length) // doesn't do anything

If I use this, this will give me the numbers of input element in html page.

window.onload = function(){
    input = document.querySelectorAll("input");
    alert(input.length);
}

And that's mean I can't access it outside. How can I access it outside?

UPDATE

This is how the html page looks like:

<html>
<head>
    <script type="text/javascript" src="actions.js"></script>
</head>
<body>
    <label for="name">Name:</label><br/>
    <input type="text" id="name" /><br/>
    <label for="address">Address:</label><br/>
    <input type="text" id="address" /><br/>
    <label for="email">E-mail:</label><br/>
    <input type="text" id="email" />
</body>
</html>

You're making a global variable because you're not declaring it with var, so you can access it outside the function. You'll have to post more code in order for anybody to tell what's going wrong. (If alert(input.length) really does not do anything then there's an error and you should check your developer console.) — Pointy
– Pointy, Commented Mar 2, 2015 at 15:18
When are you checking it outside onload? You may simply be checking too early, before onload has actually been called. — Paul Roub
– Paul Roub, Commented Mar 2, 2015 at 15:20
Actually, that's all my code. I just testing it and wondering how to make it works. — Mas Bagol
– Mas Bagol, Commented Mar 2, 2015 at 15:20
Well, thats probably because the alert-function is aleady called, before the window.onload-event is fired. But i can't figure why theres no error shown.. — Agash Thamo.
– Agash Thamo., Commented Mar 2, 2015 at 15:22
I put alert(input.length) right below onload function (in first example). So, the alert function is called first? — Mas Bagol
– Mas Bagol, Commented Mar 2, 2015 at 15:23

Madara's Ghost · Accepted Answer · 2015-03-02 15:33:11Z

There are a couple ways of doing it.

The Dangerous Way

var input; // Input declared outside
window.onload = function(){
    input = document.querySelectorAll("input");
}
// Sometime later...
alert(input.length);

This assumes that Sometime later... magically happens after window.onload was fired, which may or may not be the case, you have no guarantee.

The Hacky Way

You can make sure all of your <script> elements are found at the bottom of your page. This eliminates the need for window.onload, but as I said, it's hacky. Order of inclusion shouldn't matter.

The Promised Way

With ES6 (or with a library like bluebird), you have Promises! So you can do something like this:

/**
 * Returns a promise the resolves when window fires the load event
 */
function onload() {
    return new Promise(function(resolve, reject) {
        // Resolve if window is already loaded by the time this is called.
        if (document.readyState === 'complete') { return resolve(); }
        // If reached here, window not loaded. Resolve when it is.
        window.addEventListener('load', resolve);
    }
}

Then you can call...

var inputAvailable = onload().then(function() {
    var input = document.querySelectorAll('input');
    return input;
});
// inputAvailable is a Promise object that resolves once querySelectorAll()
// is executed and the result returned. It resolves with the returned value.

And somewhere else...

// The handler passed to .then will be called once inputAvailable resolves.
// Which is always after querySelectorAll() was executed.
inputAvailable.then(function(inputs) {
    alert(inputs.length);
});

Da Rod · Accepted Answer · 2015-03-02 15:27:56Z

1

Reference your script tags at the bottom of the HTML page and not in the head. This will remove any ambiguity as to whether the page has been loaded.

window.onload = function(){
    input = document.querySelectorAll("input");
    alert(input.length);
}

Now you should be able to extract the code from "window.load()" and get the expected results.

input = document.querySelectorAll("input");
alert(input.length);

answered Mar 2, 2015 at 15:27

Da Rod

8496 silver badges11 bronze badges

6 Comments

Madara's Ghost Over a year ago

While that definitely works, it's somewhat hacky. You can't always control the order of inclusion either.

Da Rod Over a year ago

which part is hacky? if you're referring to my comment about the position of the script tags, referencing them at the bottom of the page is considered a best practice these days. placing them at the bottom always forces them to be loaded last.

Madara's Ghost Over a year ago

No, it's not. The position of where I put my <script> elements shouldn't matter one bit.

Madara's Ghost Over a year ago

... My point is that if you write your JavaScript and DOM correctly, the place where you put your script doesn't matter. "Always put your script at the bottom" is a faux best practice for those who don't know how to correctly utilize events. The only thing that always putting your scripts at the bottom does, is save you one level of indentation. Not good enough reason to call it an absolute best practice IMO.

Da Rod Over a year ago

it was originally considered a best practice because it ensured 2 things 1) that the DOM was completely loaded prior to referencing any objects and 2) for loading performance

|

Collectives™ on Stack Overflow

JavaScript - How to take variable that defined inside onload function outside?

2 Answers 2

The Dangerous Way

The Hacky Way

The Promised Way

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The Dangerous Way

The Hacky Way

The Promised Way

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related