CODEWITHSUNDEEP
javascriptfunction
AJJ
AJJ

Reputation: 897

Add two functions to window.onload

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?

Upvotes: 74

Views: 95901

Answers (17)

Sebastien Horin
Sebastien Horin

Reputation: 11067

if you use jQuery:

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

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

Upvotes: 7

user8481047
user8481047

Reputation: 1

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

Upvotes: 0

Adam
Adam

Reputation: 11

this worked for me

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

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

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

windowOnload();

console

1234

5678

Upvotes: 1

Mladen Adamovic
Mladen Adamovic

Reputation: 3201

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

Upvotes: 0

das Keks
das Keks

Reputation: 3941

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

function func1() {
    // code
}

function func2() {
    // code
}

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

Upvotes: 5

serkan
serkan

Reputation: 7141

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

Upvotes: 8

rohit verma
rohit verma

Reputation: 111

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

Upvotes: 13

Tsonev
Tsonev

Reputation: 435

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

Upvotes: 4

SadhanaP
SadhanaP

Reputation: 37

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

Upvotes: 3

elclanrs
elclanrs

Reputation: 94101

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

Upvotes: 10

chad
chad

Reputation: 2946

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.

Upvotes: 48

Khanh TO
Khanh TO

Reputation: 48972

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

Upvotes: 137

Marty
Marty

Reputation: 39458

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

});

Upvotes: 3

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102378

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.

Upvotes: 17

Xiaodan Mao
Xiaodan Mao

Reputation: 1706

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.

Upvotes: 2

aaronman
aaronman

Reputation: 18750

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

Upvotes: 2

Janak
Janak

Reputation: 5052

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

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

Upvotes: 34

Related Questions