Add two functions to window.onload
Try putting all you code into the same [and only 1] onload method !
window.onload = function(){
// All code comes here
}
Multiple window onload functions with only Javascript
Rather than setting window.onload
, you should use addEventListener
. Listeners added this way will stack automatically.
window.addEventListener('load', function() { console.log('First listener');});
window.addEventListener('load', function() { console.log('Second listener');});
window.addEventListener('load', function() { console.log('Third listener');});
Javascript - Loading Multiple functions onLoad
Do create an init function manually.
window.addEventListener("load", myInit, true); function myInit(){ // call your functions here.... };
By doing this you can call that set of functions anytime. Add multiple window.onload events
Most of the "solutions" suggested are Microsoft-specific, or require bloated libraries. Here's one good way. This works with W3C-compliant browsers and with Microsoft IE.
if (window.addEventListener) // W3C standard
{
window.addEventListener('load', myFunction, false); // NB **not** 'onload'
}
else if (window.attachEvent) // Microsoft
{
window.attachEvent('onload', myFunction);
}
Combining two Javascript functions to one window.onload not working
I found this function a while ago and believe it or not, I still need to use it every so often. addEventLoad()
Just call addEventLoad
while passing the function to load.
This snippet will load 3 functions on"The way this works is relatively simple: if window.onload has not already been assigned a function, the function passed to addLoadEvent is simply assigned to window.onload. If window.onload has already been set, a brand new function is created which first calls the original onload handler, then calls the new handler afterwards."
window.onload
Snippet
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}
function alert1() { alert("First Function Loaded");}
function alert2() { alert("Second Function Loaded");}
function alert3(str) { alert("Third Function Loaded; Msg: " + str);}addLoadEvent(alert1);addLoadEvent(alert2);addLoadEvent(function() { alert3("This works");});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
Having multiple window.onload functions
Try using addEventListener instead.
function myFunction() {
// do stuff here
}
window.addEventListener("load", myFunction, false);
Two JS files with window.onload = function() are conflicting
onload
, as you have noticed, can only hold a single event handler. When you assign a new one, any existing one is overwritten.
Instead, use addEventListener()
, which, as the name already says, adds a listener when called.
So instead of
window.onload = function () { ... };
just dowindow.addEventListener('load', function() { ... });
Please note that the load
event might not be the optimal lifecycle hook in your case. load
comes after DOMContentLoaded
, and load
waits until all external assets like images, stylesheets, fonts etc are loaded.More often than that what you really want is to make sure to wait until all the DOM elements are readily parsed and available. For that purpose, the DOM API has the DOMContentLoaded
event:
window.addEventListener('DOMContentLoaded', function() { ... });
Instead of working with listeners like this, you also have two other options:Either place your
<script>
tag right before the closing</body>
tag:<script src="path/to/my.js"></script>
Or use the
defer
attribute on your<script>
, which allows to keep<script>
inside the<head>
:
<head>
...
<script src="path/to/my.js" defer></script>
...
</head>
JavaScript two onload functions
Yes you can. However, if the first goes wrong, the second won't fire.
Use this to catch errors:
try { //try executing the functions
function1();
function2();
}
catch(error) { // If there's an error
alert(error); // alert the error.
}
It is a good practice to put try
and catch
when experimenting with javascript.Edited: Sorry i confused childNodes[] with childNodes.item().
By the way, I tried something like this, and it works just fine:
<head>
<script>
window.onload = function() {
div = document.getElementById("someDiv");
length = div.childNodes.length;
first();
second();
}
function first() {
for(var i=0;i<length;i++) {
var set = div.childNodes.item(i);
set.setAttribute("name", "span " + (i+1));
}
}
function second() {
for(var i=0;i<length;i++) {
name = div.childNodes[i].getAttribute("name");
console.log(name);
}
}
</script>
</head>
<body>
<div id='someDiv'><span id='span1'></span><span id='span2'></span></div>
</body>
UPDATE: I found the error:Actually there's nothing wrong with your code. It works just fine, however, the last item of boje is empty space, which means, a text node. That's why the error keeps showing up. Change
for(i=1; i<broj; i++)
with for(i=1; i<broj-1; i++)
and everything should be good. Two Javascript functions one window.onload = Custom.init; and one window.onload = function() {
window.onload = function() {
Custom.init();
// ...
};
Related Topics
Fix the Upstream Dependency Conflict Installing Npm Packages
Unchecked Runtime.Lasterror While Running Tabs.Executescript
Problems with Circular Dependency and Oop in Angularjs
Google Map API - Multiple Icons in Wrong Spot
Why Is 'This' Undefined Inside Class Method When Using Promises
Why "This" Is Undefined Inside a Fat Arrow Function Definition
JavaScript Replace() Method Dollar Signs
Can Jquery Read/Write Cookies to a Browser
Do We Need Semicolon at the End
Why Doesn't Nodelist Have Foreach
Initializing Select with Angularjs and Ng-Repeat
Viewing All the Timeouts/Intervals in JavaScript
How to Stop Intense JavaScript Loop from Freezing the Browser
How to Filter an Array in JavaScript
What Is Event Pooling in React
Jquery: Change Event to Input File on Ie
Gmail Extension, Sendmessage to Background from Page Context