Add Two Functions to Window.Onload

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.

"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."

This snippet will load 3 functions on 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 do

window.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:

  1. Either place your <script> tag right before the closing </body> tag:

    <script src="path/to/my.js"></script>


  2. 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



Leave a reply



Submit