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
– adeneo, Commented Jul 8, 2015 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
– Vizael, Commented Jul 8, 2015 at 15:01

Juan Carlos Oropeza · Accepted Answer · 2015-07-08 14:37:01Z

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 8, 2015 at 14:37

Juan Carlos Oropeza

48.4k14 gold badges87 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Indi Over a year ago

Declaring order becomes and issue if second.js calls a function in first.js before loading the first.js.

Juan Carlos Oropeza Over a year ago

@Kaf i think that is the case here.

Community · Accepted Answer · 2017-05-23 12:06:04Z

0

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

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 8, 2015 at 14:38

Abhishek Dey

1,6471 gold badge16 silver badges38 bronze badges

Comments

yyf · Accepted Answer · 2015-07-08 15:30:58Z

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 8, 2015 at 15:30

answered Jul 8, 2015 at 14:50

yyf

255 bronze badges

Comments

Juan Carlos Oropeza · Accepted Answer · 2015-07-08 16:51:29Z

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);
    });
});

Collectives™ on Stack Overflow

Call function from variable in another js file

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Related