Load multiple functions from multiple javascript files

Question

I have multiple functions within multiple external JavaScript files that I want to load when the page loads. If I use "body onLoad" then one function always supersedes the other. How do I configure it so I can load each function from each file and have them load as soon at the page does?

I tried combining the files by putting both functions (only have 2 at the moment) into one javascript file, however whenever I use "document.getElementById("clockModule").innerHTML =" to output data to a specific div ID, the data is outputting to a single ID and they overlap one another

Joseph · Accepted Answer · 2017-03-25 22:47:38Z

2

When you do window.onload = function(){ ... }, what you're doing is assigning a new value to window.onload, replacing whatever is assigned to it previously. This means there can only ever be one value. In the same way, innerHTML replaces the entire contents of the element.

Instead, use addEventListener to attach your event handlers and consider creating DOM nodes and attaching them using createElement and appendChild.

answered Mar 25, 2017 at 22:47

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

3 Comments

Jay Over a year ago

Thank you for explanation. I have no idea window.onload could only have a single value assigned to it, that makes a lot of sense

Ronnie Smith Over a year ago

See MDN "window.onload = function() { init(); doSomethingElse(); };"

Jay Over a year ago

@Joseph Okay I tried figuring it out myself but I can't is there a more detailed explanation in regards to using addEventListener

Ronnie Smith · Accepted Answer · 2017-03-25 22:52:52Z

0

During development, it's fine to load several separate .js files. However, once you're ready to publish to production, you'll want to roll all that .js into one file for performance purposes (and maybe even minify it). In any case, I always use DOMContentLoaded listener like:

document.addEventListener('DOMContentLoaded', function() {
  //do stuff in here.
  if(window.location.pathname === '/about'){
    //do page specific stuff in here.
  }
}, false);

answered Mar 25, 2017 at 22:52

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

Collectives™ on Stack Overflow

Load multiple functions from multiple javascript files

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related