Call function from variable in another js file

Question

I have this codes

//first.js 
var site = {};

//and functions are declared like that
site.functionNames = function(){
    //some codes
};

//second.js
$("#element").click(function(){
    //more codes
   site.function;
   site.function();
   console.log(site);
});

How can I access/call first.js functions from the second.js click event? Tryed the ones above but all say site is undefined. Dont know if is the right way.

:Edit:

Files are already declared in order, second.js comes after some others.

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

This can't be reproduced, as long as the code is in the order posted, it should work — adeneo, Jul 08 '15 at 14:38
@adeneo it is already on order, maybe I'm calling it the wrong way.Did not find if there is a proper way to call variables/functions thare are declared in run time. — Vizael, Jul 08 '15 at 15:01
Is the code in first.js wrapped in an immediately invoked function? e.g. (function(){ ... })() if so "site" would not be visible outside that function. — Firefly, Jul 08 '15 at 15:39

score 3 · Answer 1 · answered Jul 08 '15 at 14:37

3

As long you declare the javascript file in order you should be able to use it.

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

If you invert the order, wont work

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

answered Jul 08 '15 at 14:37

Juan Carlos Oropeza

47,252
12
78
118

Declaring order becomes and issue if `second.js` calls a function in `first.js` before loading the `first.js`. – Kaf Jul 08 '15 at 14:43
@Kaf i think that is the case here. – Juan Carlos Oropeza Jul 08 '15 at 15:28

score 0 · Answer 2 · edited May 23 '17 at 12:06

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 :

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

Source: Calling a javascript function in another js file

yyf · Answer 3 · 2015-07-08T15:30:58.510

0

The browser is reading script tags in the order they are written, unless async is true. so just place your script tags the way you want and the browser will execute the second one after the first one.

Edit:
Maybe there's an error loading the js file. Check in the browser dev tools.

edited Jul 08 '15 at 15:30

answered Jul 08 '15 at 14:50

yyf

25
5

score 0 · Answer 4 · answered Jul 08 '15 at 16:51

this is a working example

Test.html

<!DOCTYPE html>
<html class="html" lang="es-ES">
<head>
    <script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script> 
    <script src="tfirst.js" type="text/javascript"></script>
    <script src="tsecond.js" type="text/javascript"></script> 
</head>
    <body>
        <div class="fieldwrapper" name="field1" id="field1" />
            First name: <input type="button" name="first" onclick="site.functionNames('html')"><br>
            Last name: <input type="button" name="second" id="other"><br>       
        </div>  
    <body>
</html>

tfirst.js

var site = {};

//and functions are declared like that
site.functionNames = function(v){
    alert("hello " + v);
};

tsecond.js

$(document).ready(function(){
    $("#field1").on('click', '#other', function () {            
        site.functionNames('second.js');   
        console.log(site);
    });
});

Call function from variable in another js file

4 Answers4