Best IT Recipes

Call javascript function in another js file

I wanted to call the function defined in the first.js file in the second.js file. both files are defined in an HTML file, for example:

<script type="text/javascript" src="first.js"></script> <script type="text/javascript" src="second.js"></script>

I want to call fn1() defined in first.js in second.js . From my searches, the answers were, if first.js determined first, it is possible, but from my tests I did not find any way to do this.

Here is my code:

second.js

 document.getElementById("btn").onclick = function() { fn1(); }

first.js

 function fn1() { alert("external fn clicked"); }
+111
javascript html
Sep 21 '14 at 19:19
source share
12 answers

A function cannot be called if it was not defined in the same file or loaded before trying to call it.

A function cannot be called if it is not in the same or a larger area than the one trying to call it.

You declare the function fn1 in first.js, and then after a second you can just get fn1();

1.js:

 function fn1 () { alert(); }

2.js:

 fn1();

index.html:

 <script type="text/javascript" src="1.js"></script> <script type="text/javascript" src="2.js"></script>
+133
Sep 21 '14 at 19:26
source share

You can make the function of a global variable in first.js and look at closure and don't put it in document.ready put it outside

you can also use ajax

  $.ajax({ url: "url to script", dataType: "script", success: success });

you can also use jquery getScript

 $.getScript( "ajax/test.js" ) .done(function( script, textStatus ) { console.log( textStatus ); }) .fail(function( jqxhr, settings, exception ) { $( "div.log" ).text( "Triggered ajaxError handler." ); });
+22
Sep 21 '14 at 7:22
source share

1st JS:

 function fn(){ alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h..."); }

2nd JS:

 $.getscript("url or name of 1st Js File",function(){ fn(); });

Hope this helps ... Happy coding.

+19
Jan 19 '15 at 6:57
source share

This should work like this:

1.js

 function fn1() { document.getElementById("result").innerHTML += "fn1 gets called"; }

2.js

 function clickedTheButton() { fn1(); }

index.html

 <html> <head> </head> <body> <button onclick="clickedTheButton()">Click me</button> <script type="text/javascript" src="1.js"></script> <script type="text/javascript" src="2.js"></script> </body> </html>

exit

Output Button + Result

Try this CodePen snippet: link .

+5
Sep 17 '18 at 14:54
source share

first.js

 function first() { alert("first"); }

Second.js

 var imported = document.createElement("script"); imported.src = "other js/first.js"; //saved in "other js" folder document.getElementsByTagName("head")[0].appendChild(imported); function second() { alert("Second");}

index.html

  <HTML> <HEAD> <SCRIPT SRC="second.js"></SCRIPT> </HEAD> <BODY> <a href="javascript:second()">method in second js</a><br/> <a href="javascript:first()">method in firstjs ("included" by the first)</a> </BODY> </HTML>
+3
Oct 23 '17 at 2:31 on
source share

Use the cache if your server allows it to increase speed.

 var extern =(url)=> { // load extern javascript let scr = $.extend({}, { dataType: 'script', cache: true, url: url }); return $.ajax(scr); } function ext(file, func) { extern(file).done(func); // calls a function from an extern javascript file }

And then use it like this:

 ext('somefile.js',()=> myFunc(args) );

Optionally, make a prototype of it so that it is more flexible. So you do not need to define a file every time you call a function or want to get code from multiple files.

+2
Nov 02 '16 at 14:46
source share

Please note that this only works if

 <script>

marks in the body, not in the head.

So

 <head> ... <script type="text/javascript" src="first.js"></script> <script type="text/javascript" src="second.js"></script> </head>

=> unknown function fn1 ()

Failures and

 <body> ... <script type="text/javascript" src="first.js"></script> <script type="text/javascript" src="second.js"></script> </body>

works.

+2
Dec 21 '18 at 21:03
source share
 window.onload = function(){ document.getElementById("btn").onclick = function(){ fn1(); } // this should work, It calls when all js files loaded, No matter what position you have written });
+1
Mar 14 '18 at 10:40
source share

Node.js

Node.js currently uses the module.exports / require system. You can use babel to carry if you want to use import syntax.

 // mymodule.js exports.hello = function() { return "TCS"; } // server.js const myModule = require('./mymodule'); let val = myModule.hello(); // val is "TCS"
0
Jun 30 '18 at 12:21
source share

Will calling a function from the onload event of the body tag onload = "fn1 (); fn2 ();" ?

0
Jan 19 '19 at 0:17
source share
 // module.js export function hello() { return "Hello"; } // main.js import {hello} from 'module'; // or './module' let val = hello(); // val is "Hello";

link from https://hype.codes/how-include-js-file-another-js-file

-one
Jun 28 '19 at 7:27
source share

I had the same problem. I defined the functions inside the finished function of the jquery document.

 $(document).ready(function() { function xyz() { //some code } });

And I called this xyz () function in another file. This does not work :) You must define the function above the document is ready.

-2
Apr 03 '19 at 14:00
source share


More articles:


All Articles