Can we call the function written in one JavaScript in another JS file

Question

Can we call the function written in one JS file in another JS file  Can anyone help me how to call the function from another JS file

User · Answer

You can call the function created in another js file from the file you are working in. So for this firstly you need to add the external js file into the html document as-

<html>
<head>
    <script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........

The function defined in the external javascript file -

$.fn.yourFunctionName = function(){
    alert('function called succesfully for - ' + $(this).html() );
}

To call this function in your current file, just call the function as -

......
<script type="text/javascript">
    $(function(){
        $('#element').yourFunctionName();
    });
</script>

If you want to pass the parameters to the function, then define the function as-

$.fn.functionWithParameters = function(parameter1, parameter2){
        alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}

And call this function in your current file as -

$('#element').functionWithParameters('some parameter', 'another parameter');

User · Answer

The function could be called as if it was in the same JS File as long as the file containing the definition of the function has been loaded before the first use of the function   I e   File1 js  function alertNumber number        alert number       File2 js  function alertOne          alertNumber  one        HTML   lt head gt            lt script src  File1 js  type  text javascript  gt  lt  script gt        lt script src  File2 js  type  text javascript  gt  lt  script gt         lt  head gt   lt body gt            lt script type  text javascript  gt         alertOne         lt  script gt        lt  body gt    The other way won t work  As correctly pointed out by Stuart Wakefield  The other way will also work   HTML   lt head gt            lt script src  File2 js  type  text javascript  gt  lt  script gt        lt script src  File1 js  type  text javascript  gt  lt  script gt         lt  head gt   lt body gt            lt script type  text javascript  gt         alertOne         lt  script gt        lt  body gt    What will not work would be   HTML   lt head gt            lt script src  File2 js  type  text javascript  gt  lt  script gt        lt script type  text javascript  gt         alertOne         lt  script gt       lt script src  File1 js  type  text javascript  gt  lt  script gt         lt  head gt   lt body gt        lt  body gt    Although alertOne is defined when calling it  internally it uses a function that is still not defined  alertNumber

User · Answer

Well  I came across another sweet solution  window  functioName   params

User · Answer

For those who want to do this in Node js  running scripts on the server-side  another option is to use require and module exports  Here is a short example on how to create a module and export it for use elsewhere   file1 js  const print    string    gt        console log string       exports print   print    file2 js  const file1   require    file1     function printOne         file1 print  one

User · Answer

ES6  Instead of including many js files using  lt script gt  in  html you can include only one main file e g  script js using attribute type  module   support  and inside script js you can include other files    lt script type  module  src  script js  gt  lt  script gt    And in script js file include another file like that   import   hello   from    module js          alert hello       In  module js  you must export function class that you will import  export function hello         return  Hello World       Working example here

User · Answer

The answer above has an incorrect assumption that the order of inclusion of the files matter  As the alertNumber function is not called until the alertOne function is called  As long as both files are included by time alertOne is called the order of the files does not matter    HTML    lt script type  text javascript  src  file1 js  gt  lt  script gt   lt script type  text javascript  src  file2 js  gt  lt  script gt   lt script type  text javascript  gt      alertOne      lt  script gt     JS      File1 js function alertNumber  n         alert  n          File2 js function alertOne          alertNumber   one           Inline alertOne        No errors   Or it can be ordered like the following     HTML    lt script type  text javascript  src  file2 js  gt  lt  script gt   lt script type  text javascript  src  file1 js  gt  lt  script gt   lt script type  text javascript  gt      alertOne      lt  script gt     JS      File2 js function alertOne          alertNumber   one           File1 js function alertNumber  n         alert  n          Inline alertOne        No errors   But if you were to do this     HTML    lt script type  text javascript  src  file2 js  gt  lt  script gt   lt script type  text javascript  gt      alertOne      lt  script gt   lt script type  text javascript  src  file1 js  gt  lt  script gt     JS      File2 js function alertOne          alertNumber   one           Inline alertOne        Error  alertNumber is not defined    File1 js function alertNumber  n         alert  n         It only matters about the variables and functions being available at the time of execution  When a function is defined it does not execute or resolve any of the variables declared within until that function is then subsequently called    Inclusion of different script files is no different from the script being in that order within the same file  with the exception of deferred scripts    lt script type  text javascript  src  myscript js  defer  defer  gt  lt  script gt    then you need to be careful

User · Answer

If all files are included   you can call properties from one file to another  like function  variable  object etc    The js functions and variables that you write in one  js file -     say a js will be available to other js files - say b js as      long as both a js and b js are included in the file      using the following include mechanism and in the same order if the function in b js calls the one in a js     lt script language  javascript  src  a js  gt  and   lt script language  javascript  src  b js  gt

User · Answer

As long as both are referenced by the web page  yes   You simply call the functions as if they are in the same JS file

User · Answer

Here s a more descriptive example with a CodePen snippet attached   1 js  function fn1       document getElementById  result   innerHTML     fn1 gets called       2 js  function clickedTheButton       fn1         index html   lt html gt     lt head gt     lt  head gt     lt body gt       lt button onclick  clickedTheButton    gt Click me lt  button gt       lt script type  text javascript  src  1 js  gt  lt  script gt       lt script type  text javascript  src  2 js  gt  lt  script gt     lt  body gt    lt  html gt    output    Try this CodePen snippet  link

User · Answer

yes you can   you need to refer both JS file to the  aspx page   lt script language  javascript  type  text javascript  src  JScript1 js  gt    lt  script gt        lt script language  javascript  type  text javascript  src  JScript2 js  gt       lt  script gt       JScript1 js   function ani1         alert  1        ani2         JScript2 js    function ani2         alert  2

[javascript] Can we call the function written in one JavaScript in another JS file?

Examples related to javascript

Examples related to include