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>
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>
-
1
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. (Ifalert(input.length)really does not do anything then there's an error and you should check your developer console.) – Pointy Commented Mar 2, 2015 at 15:18 -
1
When are you checking it outside
onload? You may simply be checking too early, beforeonloadhas actually been called. – 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 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. Commented Mar 2, 2015 at 15:22
-
I put
alert(input.length)right belowonloadfunction (in first example). So, thealertfunction is called first? – Mas Bagol Commented Mar 2, 2015 at 15:23
2 Answers
Reset to default 6There 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 === 'plete') { 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);
});
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);