Wanted to call a function in one file where definition of the function is in other 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:

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. Thanks

Edit: Here's sample codes: second.js

this.getSecEnabled = function(){   ----> i dont know how this is used here..
     return SecEnabled;
}

first.js

if( getSecEnabled() == "SecEnabled" ){
    alert(" Security Enabled....!!");
}else{
        alert(" Secuity Disbaled.!!");
}

Issue : not able to print any of the statements here Enabled/Disabled.

Please help i am new to javascript

score 3 · Answer 1 · answered Oct 13 '18 at 19:02

3

Try loading second.js prior to first.js

answered Oct 13 '18 at 19:02

Baksa Gimm

123
9

remove 'this' from your function. so in second.js it should be: var getSecEnabled = function(){ return SecEnabled; } also, I dont know where SecEnabled is comming from. Is it defined else where? – Baksa Gimm Nov 05 '18 at 13:44

score 0 · Answer 2 · answered Oct 13 '18 at 19:08

0

Generally if you don't want to wait until document is loaded then you have to load scripts in the following order:

second.js
first.js

But if you will change code of the second to execute when document will be ready then you can load scripts in any order.

How to run script when document is ready

answered Oct 13 '18 at 19:08

BąQ

296
1
3
13

Could you please check whether condition is proper in first.js? is it something like this? because i am getting error here in this line ... if( this.getSecEnabled() == "SecEnabled" ){ Script not going forward after this line – satish kumar Oct 13 '18 at 19:13
Please change it to : getSecEnabled = function(){ return 'SecEnabled'; } Because you did not declared variable with name SecEnabled – BąQ Oct 13 '18 at 19:15
you want to change the definition of funtion ?? which is in second.js which we should touch i belive, we can do changes in conditional statement. Please let me know changes in the condition of first.js – satish kumar Oct 13 '18 at 19:26
But you have error in the getSecEnabled or you didn't paste whole file. As I said there is no definition of SecEnabled variable and this is a problem. – BąQ Oct 13 '18 at 19:30

score 0 · Answer 3 · 2018-10-13T19:57:54.950

0

Yes, you can do it. Most of the latest browsers support ECMAScript modules out of the box. All you need to do is :

Make sure all of them are linked in your browser like this :

<script src="./path/to/script1.js" type="module" />

Now you can do something like this :

script1.js

   export function getSecEnabled (){   
     return SecEnabled;
}

script2.js

 import { getSecEnabled } from 'path/to/script1.js';

if( getSecEnabled() == "SecEnabled" ){
    alert(" Security Enabled....!!");
}else{
        alert(" Secuity Disbaled.!!");
}

edited Oct 13 '18 at 19:57

answered Oct 13 '18 at 19:14

Could you please check whether condition is proper in first.js? is it something like this? because i am getting error here in this line ... if( this.getSecEnabled() == "SecEnabled" ){ Script not going forward after this line – satish kumar Oct 13 '18 at 19:16
you don't need to write `this` - just write `getSecEnabled() == "SecEnabled"` since now you have access to the function, since you imported it in the top of the file. – Oct 13 '18 at 19:18
i tried like as below as well with out this statement. if( getSecEnabled() == "SecEnabled" ){ still failed to go forward of execution – satish kumar Oct 13 '18 at 19:22

score 0 · Answer 4 · answered Oct 13 '18 at 19:31

I have a function called include().

What this function does is tell the browser to load a file , then do an action .

So , the action can only be done AFTER the file is loaded .

So in your case ; we will first include first.js then include second.js

So , second.js will run only AFTER first.js runs.

Here is the code :

function include(file){
    return new Promise(function(resolve, reject){
            var script = document.createElement('script');
            script.src = file;
            script.type ='text/javascript';
            script.defer = true;
            document.getElementsByTagName('head').item(0).appendChild(script);

            script.onload = function(){
            resolve()
            }
            script.onerror = function(){
              reject()
            }
          })

     /*I HAVE MODIFIED THIS TO  BE PROMISE-BASED 
       HOW TO USE THIS FUNCTION 

      include('js/somefile.js').then(function(){
      console.log('Do an action that depends on somefile.js');
      },function(){
      console.log('Do not do an action that depends on somefile.js');
      })
      */
    }



    include('first.js')
    .then(()=>{
      include('second.js');
    })

Wanted to call a function in one file where definition of the function is in other file

4 Answers4