Multiple Javascript files are not working

Question

I'm new to Javascript. I would like to include more than two js(javascript) file. When I type something(text) on the input filed particuar function is not executing. only last js file(three.js) is working. what I'm missing please let me know.
my code:

Text.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>Myweb</title>
  </head>
<script src="one.js" type="text/javascript"></script> 
<script src="two.js" type="text/javascript"></script> 
<script src="three.js" type="text/javascript"></script> 
<style>


</style>
  <body>

<h1>Hello World!</h1>
<input type='text' placeholder='enter name' id='name'><br><br>
<input type='text' placeholder='enter uname' id='uname'><br><br>
<input type='text' placeholder='enter fname' id='fname'>

  </body>
</html>

one.js

window.onload = initPage;


function initPage() {

    document.getElementById("name").onchange=namefun;

}
function namefun(){
var name=document.getElementById("name").value;

alert("name:"+name);
}

two.js

window.onload = initPage;


function initPage() {

    document.getElementById("uname").onchange=unamefun;

}
function unamefun(){
var uname=document.getElementById("uname").value;

alert("uname:"+uname);
}

three.js

window.onload = initPage;


function initPage() {

    document.getElementById("fname").onchange=fnamefun;

}
function fnamefun(){
var fname=document.getElementById("fname").value;

alert("fname:"+fname);
}

Any help

Thanks

You can't have multiple functions with the same name in the same scope. How is the code supposed to know which one you mean when you call it? — ADyson, Jun 06 '19 at 09:39
As @ADyson said, you are redefining the function to call when the `window.onload` event happens in each of your three files. Because `three.js` is added last, it's version of `initPage` is used when the `window.onload` event happens. I would consider rethinking your approach - i.e. do you want all three methods to fire? If so, you will need to perhaps combine them — Jamie Taylor, Jun 06 '19 at 10:12

score 2 · Answer 1 · answered Jun 06 '19 at 09:37

That is because the last file redefines the initPage function and reassigns window.onload.

You can't have multiple functions with the same name and if you want to use multiple callbacks for the load event you'll have to set them using .addEventListener.

TPReal · Answer 2 · 2019-06-06T10:03:11.437

2

All the files write things to the global scope of JS names, which means that your initPage function overwrite each other, and as consequence, only the last one is used. You also overwrite the value of onload, so only one of them would be called anyway. Try using addEventListener instead, like here: https://stackoverflow.com/a/25984032/1832228 .

edited Jun 06 '19 at 10:03

answered Jun 06 '19 at 09:38

TPReal

1,539
12
26

score 2 · Accepted Answer · answered Jun 06 '19 at 10:21

you are resetting the window.onload function each time. so that the only last one is executing.

Try this one:

window.onload = initPage;

function addEventHandler(obj, eventName, handler) {
  if (document.attachEvent) {
    obj.attachEvent("on" + eventName, handler);
  } else if (document.addEventListener) {
    obj.addEventListener(eventName, handler, false);
  }
}
function initPage() {
     addEventHandler(document.getElementById("name"), "change", namefun);
    addEventHandler(document.getElementById("uname"), "change", unamefun);
    addEventHandler(document.getElementById("fname"), "change", fnamefun);


}

score 1 · Answer 4 · answered Jun 06 '19 at 09:37

1

you are resetting the window.onload function each time.

answered Jun 06 '19 at 09:37

andy mccullough

9,070
6
32
55

Hiren Patel · Answer 5 · 2019-06-06T09:53:17.573

You have initialized window.onload 3 times means you are resting it so that the only last one is an assignment that is assigned to window.onload so that last one is only executed.

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}


addLoadEvent(func1);
addLoadEvent(func2);
addLoadEvent(func3);

score 0 · Answer 6 · answered Dec 22 '21 at 05:12

Here's what I learned that I wish someone would have told me when I been surfing the internet for days because I had a similar problem to yours. Where I had multiple js files in one HTML, and only one of them would work.

So here's the thing: window.onload overrides other window.onload events. So if I had for example.

one.js:

window.onload = function(){
 elem1.innerHTML = "Hello world ONE"
}

two.js:

window.onload = function(){
 elem2.innerHTML = "hello world TWO"
}

Whichever loads last will override all the onload events that previously loaded. So in the above two codes, the output would more likely be hello world TWO considering that it would load last.

SOLUTION: IS ... using

window.addEventListener("load", function(){
 // your code goes here
)}

Using window.addEventListener("load", function(){ ... }), you can have as many files in the same html file as you would like.

for more reference https://adnan-tech.com/difference-between-window-onload-and-window-addeventlistener/

Multiple Javascript files are not working

6 Answers6