Calling a javascript function in another js file

Question

I wanted to call a function defined in a first js file in second js file  both files are defined in an HTML file like    lt script type  text javascript  src  first js  gt  lt  script gt   lt script type  text javascript  src  second js  gt  lt  script gt    I want to call fn1   defined in first js in second js  From my searches answers were if first js is defined first it is possible but from my tests I haven t found any way to do that   Here is my code   second js  document getElementById  btn   onclick   function         fn1        first js  function fn1         alert  external fn clicked

User · Answer

declare function in global scope with window  first js  window fn1   function fn1         alert  external fn clicked        second js  document getElementById  btn   onclick   function        fn1        include like this   lt script type  text javascript  src  first js  gt  lt  script gt   lt script type  text javascript  src  second js  gt  lt  script gt

User · Answer

You can make the function a global variable in first js and have a look at closure  and do not put it in document ready put it outside  you can use ajax too        ajax         url   url to script         dataType   script         success  success           same way you can 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

User · Answer

use  var  while creating function  then you can access that from another file  make sure both files are well connected to your project and can access each other   file 1 js  var firstLetterUppercase   function str       str   str toLowerCase   replace   b a-z  g  function letter          return letter toUpperCase              return str      accessing this function variable form file 2 js file  firstLetterUppercase  gobinda         output    Gobinda   hope this will help somebody  happy coding

User · Answer

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

User · Answer

A function cannot be called unless it was defined in the same file or one loaded before the attempt to call it   A function cannot be called unless it is in the same or greater scope then the one trying to call it   You declare function fn1 in first js  and then in second you can just have fn1     1 js    function fn1          alert        2 js    fn1      index html      lt script type  text javascript  src  1 js  gt  lt  script gt   lt script type  text javascript  src  2 js  gt  lt  script gt

User · Answer

You could consider using the es6 import export syntax  In file 1   export function f1           And then in file 2   import   f1   from    file1 js   f1      Please  note that this only works if you re using  lt script src    file2 js  type  module  gt   You will not need two script tags if you do it this way  You simply need the main script  and you can import all your other stuff there

User · Answer

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    lt HTML gt       lt HEAD gt          lt SCRIPT SRC  second js  gt  lt  SCRIPT gt       lt  HEAD gt       lt BODY gt          lt a href  javascript second    gt method in second js lt  a gt  lt br  gt          lt a href  javascript first    gt method in firstjs   included  by the first  lt  a gt       lt  BODY gt   lt  HTML gt

User · Answer

This is actually coming very late  but I thought I should share   in index html   lt script type  text javascript  src  1 js  gt  lt  script gt   lt script type  text javascript  src  2 js  gt  lt  script gt    in 1 js  fn1   function         alert  external fn clicked        in 2 js  fn1

User · Answer

My idea is let two JavaScript call function through DOM  The way to do it is simple     We just need to define hidden js ipc html tag  After the callee register click from the hidden js ipc tag  then The caller can dispatch the click event to trigger callee  And the argument is save in the event that you want to pass  When we need to use above way   Sometime  the two javascript code is very complicated to integrate and so many async code there  And different code use different framework but you still need to have a simple way to integrate them together  So  in that case  it is not easy to do it  In my project s implementation  I meet this case and it is very complicated to integrate  And finally I found out that we can let two javascript call each other through DOM  I demonstrate this way in this git code  you can get it through this way   Or read it from https   github com milochen0418 javascript-ipc-demo  git clone https   github com milochen0418 javascript-ipc-demo cd javascript-ipc-demo git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e  Anywhere  Here  I try to explain by the following simple case  I hope that this way can help you to integrate two different javascript code easier than before there is no any JavaScript library to support communication between two javascript file that made by different team   lt html gt   lt head gt       lt link rel  quot stylesheet quot  type  quot text css quot  href  quot css style css quot    gt   lt  head gt   lt body gt       lt div id  quot js ipc quot  style  quot display none  quot  gt  lt  div gt       lt div id  quot test btn quot  class  quot btn quot  gt           lt a gt  lt p gt click to test lt  p gt  lt  a gt       lt  div gt       lt  body gt   lt script src  quot js callee js quot  gt  lt  script gt   lt script src  quot js caller js quot  gt  lt  script gt   lt  html gt   And the code css style css  btn       background-color grey      cursor pointer      display inline-block     js caller js function caller add of ipc num1  num2        var e   new Event  quot click quot        e arguments   arguments      document getElementById  quot js ipc quot   dispatchEvent e     document getElementById  quot test btn quot   addEventListener  click   function e        console log  quot click to invoke caller of IPC quot        caller add of ipc 33  22              js callee js document getElementById  quot js ipc quot   addEventListener  click    e   gt       callee add of ipc e arguments           function callee add of ipc arguments        let num1   arguments 0       let num2   arguments 1       console log  quot This is callee of IPC -- inner-communication process quot        console log   quot num1   num2    quot     num1   num2

User · Answer

I have had same problem  I have had defined functions inside jquery document ready function     document  ready function        function xyz                 some code            And this function xyz   I have called in another file  This doesn t working    You have to defined function above document ready

User · Answer

This code should work  If it doesn t  check the sources in your debugger tool  Press F12 or Ctrl Shift I in Google Chrome   If you can t find the fn1   function there then  press Ctrl F5  to fully reload the site  Ctrl R or F5 isn t enough   After reloading the page  it should work

User · Answer

Use cache if your server allows it to improve speed    var extern   url   gt                 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      gt                    myFunc args         Optionally  make a prototype of it to have it more flexible  So that you don t have to define the file every time  if you call a function or if you want to fetch code from multiple files

User · Answer

module js export function hello       return  Hello         main js import  hello  from  module      or    module  let val   hello       val is  Hello     reference from https   hype codes how-include-js-file-another-js-file

User · Answer

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

User · Answer

It should work like this   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

Please note this only works if the    lt script gt    tags are in the body and NOT in the head   So    lt head gt       lt script type  text javascript  src  first js  gt  lt  script gt   lt script type  text javascript  src  second js  gt  lt  script gt   lt  head gt       unknown function fn1    Fails and     lt body gt       lt script type  text javascript  src  first js  gt  lt  script gt   lt script type  text javascript  src  second js  gt  lt  script gt   lt  body gt    works

[javascript] Calling a javascript function in another js file

Examples related to javascript

Examples related to html