Multiple Javascript files are not working

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

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

Share Improve this question asked Jun 6, 2019 at 9:34 codenow123 977 bronze badges

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 Commented Jun 6, 2019 at 9: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 bine them – Jamie Taylor Commented Jun 6, 2019 at 10:12

Add a ment |

6 Answers 6

Sorted by: Reset to default 2

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


}

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.

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./a/25984032/1832228 .

you are resetting the window.onload function each time.

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

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./difference-between-window-onload-and-window-addeventlistener/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Multiple Javascript files are not working - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)