I want to get all input element in html page. I\'ve tried this:
window.onload = function(){
input = document.querySelectorAll(\"input\");
}
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 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);
});