Menu
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>
515
There are a couple ways of doing it.
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.
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.
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
