Trying to execute two JavaScript files together with window.onload

Question

I've got two separate JavaScript files linked to one HTML document and when I run it, it seems the second JS file overrides the first. I think it has to do with the window.onload being called in each file but am not sure how to work around that.

I've tried using window.onloadend on one of the JS files and window.onload on the other but with the same results, the window.onloadend is the only file that is executed.

file1.js

function init() {
    applyFunction();
    prefillForm();
    var applyForm = document.getElementById("applyForm");
    applyForm.onsubmit = validate;
}

window.onload = init;

file2.js

function init() {
    currentPage();
    timer();
}

window.onload = init;

For what it's worth the correct course of action here would be to just place your scripts at the end of the <body> tag and not the start of the head - that would let you solve the onload/DOMContentLoaded check entirely and just write your code. Also consider doing work in multiple scripts in modules :] — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 28, 2019 at 9:27
I'll definitely make a note of doing that next time, thanks! — Tom
– Tom, Commented Apr 28, 2019 at 9:34

CertainPerformance · Accepted Answer · 2019-04-28 09:20:01Z

2

Whenever you assign to an on- property, you will overwrite whatever was previously attached to that property, and when the event fires, only the latest handler will run. Use addEventListener instead:

window.addEventListener('load', init);

(put that in place of the .onload line in both files)

Or, if you don't have to wait for the entire document to load (including things like images), you might listen for DOMContentLoaded instead, which will trigger more quickly. The DOM and all elements will be populated, though not all resources may have been downloaded:

window.addEventListener('DOMContentLoaded', init);

answered Apr 28, 2019 at 9:20

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Spd · Accepted Answer · 2019-04-28 10:49:35Z

-1

Or eventually you can rename Init functions to be not unique and in HTML call an anonymous function, which calls them both sequentially. And in HTML call them:

load = () => {
   Init1();
   Init2();
}

answered Apr 28, 2019 at 10:49

Martin Spd

531 silver badge4 bronze badges

Collectives™ on Stack Overflow

Trying to execute two JavaScript files together with window.onload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related