Attempting to run a pair of JavaScript files simultaneously using the window.onload event

Question

Attempting to run a pair of JavaScript files simultaneously using the window.onload event

I'm facing an issue where two JavaScript files linked to a single HTML document are conflicting with each other. It seems like the second JS file is always taking precedence over the first one. I suspect that this might be related to both files using window.onload, but I'm unsure of how to resolve it.

I attempted to use window.onloadend in one of the JS files and window.onload in the other, but unfortunately, the window.onloadend script ended up being the only one executing.

Here's a snippet from file1.js:

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

window.onload = initialize;

And here's a snippet from file2.js:

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

window.onload = initialize;

javascript onload

Answer 1

Answer №1

When you set an on- property, it will replace whatever was previously linked to that property. When the event occurs, only the most recent handler will execute. It is recommended to use addEventListener instead:

window.addEventListener('load', init);

(replace the .onload line in both files with this)

Alternatively, if immediate loading of the entire document (including images) is not necessary, you can opt for listening to DOMContentLoaded, which triggers faster. At this point, the DOM and all its elements will be ready, although not all resources may have finished downloading:

window.addEventListener('DOMContentLoaded', init);

Answer 2

When you set an on- property, it will replace whatever was previously linked to that property. When the event occurs, only the most recent handler will execute. It is recommended to use addEventListener instead:

window.addEventListener('load', init);

(replace the .onload line in both files with this)

Alternatively, if immediate loading of the entire document (including images) is not necessary, you can opt for listening to DOMContentLoaded, which triggers faster. At this point, the DOM and all its elements will be ready, although not all resources may have finished downloading:

window.addEventListener('DOMContentLoaded', init);

Answer 3

Answer №2

Another option is to consider renaming the Init functions to make them non-unique, and then using an anonymous function in HTML to call both of them sequentially. In your HTML code, you would call them like this:

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

Answer 4

Another option is to consider renaming the Init functions to make them non-unique, and then using an anonymous function in HTML to call both of them sequentially. In your HTML code, you would call them like this:

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

Attempting to run a pair of JavaScript files simultaneously using the window.onload event

Answer №1

Answer №2

Similar questions

When starting a new project with Angular 7, the option to set up routing is automatically included without asking for confirmation

Instructions on calculating the sum of a checkbox value and a textbox value

Having trouble importing a CSS file into a Vue.js single file component?

Creating an interactive text using Javascript functions

Utilizing modal functionality in CakePHP 3 (or: Incorporating JavaScript within Controllers)

Deactivate the action triggered by a jQuery click event

Page freezing due to JQuery scroll event

AngularJS and Handlebars (npm)

Options in the dropdown menu

Exploring the power of ElasticSearch alongside Mysql

Configuring the start_url and scope within the manifest.json file for a React Progressive Web App

Guide on using PHP to remove the trash icon glyphicon

When implementing JWT for route authentication, the webpage remains frozen in one spot

Organizing Dates in a Kendo Grid: How to Filter and Sort a DateTime Field

How to Build an Express.js Query by Using a URL Parameter?

Executing npm scripts in Node.js

When utilizing jQuery.Mockjax to simulate the JSON data, the Backbone.Collection.fetch() function consistently results in a 404 error

The app.get() method in Node JS and Express requires three parameters, and I am seeking clarification on how these parameters work

There is an issue with the project where main.jsbundle, Foundation, and Security are missing, resulting in

Displaying information on a webpage using URL query parameters