Add two functions to window.onload

Question

I have two functions on my form except one does not work if the other is active. Here is my code:

window.onload = function(event) {
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function() {
        $input2.value = $input1.value;
    });
}

window.onload=function(){
    document.getElementById('enable').onchange=function(){
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };
};

What I mean is that when I have both these functions in my form the second function works fine but the first will not work, if take out the second function the first one will work like normal, why is this happening? Is it because of the names?

Answer 1

window.addEventListener("load",function(event) {
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function() {
        $input2.value = $input1.value;
    });
},false);

window.addEventListener("load",function(){
    document.getElementById('enable').onchange=function(){
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };
},false);

Documentation is here

Note that this solution may not work across browsers. I think you need to rely on a 3-rd library, like jquery $(document).ready

Answer 2

If you can't combine the functions for some reason, but you have control over one of them you can do something like:

window.onload = function () {
    // first code here...
};

var prev_handler = window.onload;
window.onload = function () {
    if (prev_handler) {
        prev_handler();
    }
    // second code here...
};

In this manner, both handlers get called.

Answer 3

Try putting all you code into the same [and only 1] onload method !

 window.onload = function(){
        // All code comes here 
 }

Answer 4

You cannot assign two different functions to window.onload. The last one will always win. This explains why if you remove the last one, the first one starts to work as expected.

Looks like you should just merge the second function's code into the first one.

Answer 5

window.addEventListener will not work in IE so use window.attachEvent

You can do something like this

function fun1(){
    // do something
}

function fun2(){
    // do something
}


var addFunctionOnWindowLoad = function(callback){
      if(window.addEventListener){
          window.addEventListener('load',callback,false);
      }else{
          window.attachEvent('onload',callback);
      }
}

addFunctionOnWindowLoad(fun1);
addFunctionOnWindowLoad(fun2);

Answer 6

Because you're overriding it. If you want to do it with onload you could just extend the previous function. Here's one way to do it:

Function.prototype.extend = function(fn) {
  var self = this;
  return function() {
    self.apply(this, arguments);
    fn.apply(this, arguments);
  };
};

window.onload = function() {
  console.log('foo');
};

window.onload = window.onload.extend(function() {
  console.log('bar');
});

// Logs "foo" and "bar"

Demo: http://jsbin.com/akegut/1/edit

Edit: If you want to extend with multiple functions you can use this:

Function.prototype.extend = function() {
  var fns = [this].concat([].slice.call(arguments));
  return function() {
    for (var i=0; i<fns.length; i++) {
      fns[i].apply(this, arguments);
    }
  };
};

window.onload = window.onload.extend(function(){...}, function(){...}, ...);

Answer 7

If you can not access to the old window.onload yet still want to keep and add another one, here is the way,

       function addOnload(fun){
          var last = window.onload;
          window.onload = function(){
            if(last) last();
            fun();
          }
        } 

        addOnload(function(){
            console.log("1");
        });

        addOnload(function(){
            console.log("2");
        });

Answer 8

if you use jQuery:

$(window).load(function() {
  //code
})

$(window).load(function() {
 //code
})

Answer 9

For some time I used the above solution with:

window.onload = function () {
    // first code here...
};

var prev_handler = window.onload;
window.onload = function () {
    if (prev_handler) {
        prev_handler();
    }
    // second code here...
};

However it caused in some cases IE to throw a "stack overflow error" described here in this post: "Stack overflow in line 0" on Internet Explorer and a good write-up on it here

After reading through all the suggested solutions and having in mind that jquery is not available, this is what I came up with(further expanding on Khanh TO's solution with some browser compatibility checking) do you think such an implementation would be appropriate:

function bindEvent(el, eventName, eventHandler) {
            if (el.addEventListener){
                    el.addEventListener(eventName, eventHandler, false); 
                } else if (el.attachEvent){
                    el.attachEvent("on"+eventName, eventHandler);
                }
            }
      render_errors = function() {
      //do something
      }

      bindEvent(window, "load", render_errors);

      render_errors2 = function() {
      //do something2
      }

      bindEvent(window, "load", render_errors2);

Answer 10

Why not just call both functions from one onload-function?

function func1() {
    // code
}

function func2() {
    // code
}

window.onload = function() {
    func1();
    func2();
}

Answer 11

If you absolutely must have separate methods triggered as the result of window.onload, you could consider setting up a queue of callback functions which will be triggered.

It could look like this in its simplest form:

var queue = [];
var loaded = false;

function enqueue(callback)
{
    if(!loaded) queue.push(callback);
    else callback();
}

window.onload = function()
{
    loaded = true;
    for(var i = 0; i < queue.length; i++)
    {
        queue[i]();
    }
}

And used in your case like so:

enqueue(function()
{
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function()
    {
        $input2.value = $input1.value;

    });

});

enqueue(function()
{
    document.getElementById('enable').onchange=function()
    {
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };

});

Answer 12

By keeping 2 window.onload(), the code in the last chunk is executed.

Answer 13

When you put the second function into window.onload basically what you are doing is replacing a value. As someone said before you can put the two functions into one function and set window.onload to that. If you are confused think about it this way, if you had an object object, and you did object.value = 7; object.value = 20 the value would be 20 window is just another object

Answer 14

You can not bind several functions to window.onload and expect all of these functions will be executed. Another approach is using $(document).ready instead of window.onload, if you already use jQuery in your project.

Answer 15

this worked for me

function first() {
    console.log(1234);
}

function second() {
    console.log(5678);
}

const windowOnload = window.onload = () => {
    first();
    second();
};

windowOnload();

console

1234

5678

Answer 16

I didn't like other answers and found another way of doing this.

This can be achieved with this function.
readyState has 3 options loading, interactive and complete https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Therefore, this script would work:

<script>
  if (typeof whenDocReady === "function") {
    // already declared, do nothing
  } else {
    function whenDocReady(fn) {
      // see if DOM is already available
      if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
      } else {
        document.addEventListener("DOMContentLoaded", fn);
      }
    }
  }
</script>

Usage after defining this script:

<script>
whenDocReady(function() {
//do whatever stuff what you would do on window.onload
};
</script>

Credit: https://stackoverflow.com/a/9899701/1537394

Answer 17

using promises:

    function first(){
          console.log("first");
    }

    function second(){
          console.log("second");
    }
    
    isLoaded = new Promise((loaded)=>{ window.onload = loaded });
    isLoaded.then(first);
    isLoaded.then(second);