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?

Why don't you just add the functionality in the second function into the first one. Or call the second one from the first one. — Adarsh, May 22 '13 at 03:55
Why don't you continue to use the better way for handling events - `addEventListener`? Then you wouldn't have overwriting problems like this — Ian, May 22 '13 at 04:14

score 106 · Answer 1 · edited May 22 '13 at 04:08

106

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

edited May 22 '13 at 04:08

answered May 22 '13 at 04:00

Khanh TO

46,783
12
97
112

3

`+1` However, he used `addEventListener` already in his code, so this solution is fair. – May 22 '13 at 04:05
1

+1 Answer below like extend or IE specific might satisfy cross browser support, if vanilla JS implementation is favor. It is good and simple if IE10 and other browser support addEventListener mean adding more EventListener in addition of default handle: onload, onReadyStateChange, readystatechange, which would' not affect from using third party script. Hope we won't have the problem of this specification mismatch in future. – Edward Chan JW Jul 14 '18 at 16:42

score 39 · Answer 2 · answered May 22 '13 at 04:12

39

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.

answered May 22 '13 at 04:12

chad

2,610
1
15
15

1

This is the way I'd do it. +1 – Chris Kempen Oct 20 '15 at 10:06
I get `Uncaught RangeError: Maximum call stack size exceeded` error :( – joseantgv Sep 27 '16 at 11:46
1

I also got that stack overflow error. I believe the problem is that prev_handler ends up pointed to the window.onload function itself which in turn calls the prev_handler which calls the window.onload function. Try making a double delegate as shown in https://stackoverflow.com/questions/12213234/using-window-onload-more-than-1-times#answer-22377112 – Brett Jun 08 '17 at 16:20

score 32 · Accepted Answer · answered May 22 '13 at 03:55

32

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

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

answered May 22 '13 at 03:55

Janak

4,630
4
24
42

8

I can't do this as my onLoad functions are dynamically echoed... =/ – Marcelo Dec 09 '16 at 18:47
When that happens, you may want to refactor the code where a single so-called registry gets all functions and then outputs a single function where other functions are called – Alexander Kucheryuk Feb 14 '21 at 17:20

Leniel Maccaferri · Answer 4 · 2013-05-22T04:01:41.927

15

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.

edited May 22 '13 at 04:01

answered May 22 '13 at 03:53

Leniel Maccaferri

94,281
40
348
451

elclanrs · Answer 5 · 2013-05-22T04:20:21.390

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(){...}, ...);

Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects. Source: https://www.w3schools.com/js/js_object_prototypes.asp — Shayan, Dec 10 '19 at 16:10

score 8 · Answer 6 · answered Apr 10 '15 at 07:23

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);

serkan · Answer 7 · 2018-01-29T21:04:24.403

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");
        });

Sebastien Horin · Answer 8 · 2018-11-15T04:21:00.513

5

Simply Use (jQuery):

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

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

edited Nov 15 '18 at 04:21

answered Feb 19 '16 at 13:36

Sebastien Horin

8,814
4
39
51

This seemed like a great option, but did not work for me. – Manish Jun 24 '18 at 14:36
you should add `)` after `}` (I can't edit directly, since SO asks at least 6 characters per edit) – Zhuoer Dong Nov 14 '18 at 06:11

score 4 · Answer 9 · edited May 23 '17 at 12:10

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);

score 3 · Answer 10 · answered Jun 04 '13 at 11:39

3

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

answered Jun 04 '13 at 11:39

SadhanaP

37
3

score 2 · Answer 11 · answered May 22 '13 at 03:58

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

score 2 · Answer 12 · answered May 22 '13 at 04:01

2

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.

answered May 22 '13 at 04:01

Xiaodan Mao

1,448
2
16
27

score 2 · Answer 13 · answered May 22 '13 at 04:03

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;
    };

});

score 2 · Answer 14 · answered Feb 27 '19 at 08:49

2

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

function func1() {
    // code
}

function func2() {
    // code
}

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

answered Feb 27 '19 at 08:49

das Keks

2,933
3
27
48

score 0 · Answer 15 · answered Jan 28 '20 at 07:58

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

Add two functions to window.onload

15 Answers15

Linked

Related