Use a function from a .js file in a different .js file

Question

My second .js file has a function

function createRectangle(x, y, w, h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    ctx.fillRect(x, y, w, h);
}

But I want to call this function from my first .js file how do I do that?

Are both files included on one page? You can include both on a page in sequence that second one will have functions available from first one. — Farrukh Subhani
– Farrukh Subhani, Commented Jan 3, 2014 at 16:45
Make sure you are running function dependent on DOM after DOM has loaded completely. — Farrukh Subhani
– Farrukh Subhani, Commented Jan 3, 2014 at 16:49
For html issue of not loading please use jsfiddle to put up a sample of code and get your self familiar with debugging js. Will help you in future. — Farrukh Subhani
– Farrukh Subhani, Commented Jan 3, 2014 at 16:50

Jamiec · Accepted Answer · 2014-01-03 16:45:45Z

4

make sure your page includes second.js before first.js

an in

<script src="second.js"></script>
<script src="first.js"></script>

now within first.js you can call your createRectangle function defined in second.js

answered Jan 3, 2014 at 16:45

Jamiec

136k15 gold badges141 silver badges202 bronze badges

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

3 Comments

Liam Over a year ago

...and then call the function!

user3158013 Over a year ago

I did that but when i call the function, it doesnt load it to the canvas?

Jamiec Over a year ago

@user3158013 - thats a separate issue, one where only you will be able to work it out by debugging

Adam D. Ruppe · Accepted Answer · 2014-01-03 16:50:53Z

The order of includes doesn't really matter. The order of execution does. Let's say we had a javascript file:

function a() { b(); }
function b() { alert("hello!"); }
window.onload = a;

That'll work. Function a appeared before function b in the code, but what matters is the execution order. Since I didn't actually call function a nor b until window.onload, that ensures the browser has a chance to load everything before running anything.

It is a good idea to put off running JS until onload (or document.ready) because that ensures all code is loaded, including the HTML. If you try to get an element before the html dom is ready/loaded, it will fail too.

akskap · Accepted Answer · 2014-01-03 16:59:49Z

The order of inclusion of both scripts should not matter as long as the function is called in first.js after second.js is completely loaded.

PS: FYI, after DOM is parsed by the browser, the scripts included in a html page end up in a common space/scope (Hence, calling functions from other .js files is possible). In your case, defining functions like this can end up in a problem if some other .js file defines a function with the same name as yours. Your function will be overwritten in that case. A study of design patterns and structuring of code will definitely help you with such problems in future.

Krish R · Accepted Answer · 2014-01-03 17:14:49Z

0

Add your second.js file before first.js file in one page. i.e. in other words, both should be included in the page, you are tried after the calling function.

such as,

<script src="yourpath/second.js"></script>
<script src="yourpath/first.js"></script>

edited Jan 3, 2014 at 17:14

answered Jan 3, 2014 at 16:46

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

1 Comment

epascarello Over a year ago

The second can be after the first as long as the first script calls it after the second one has been loaded.

Collectives™ on Stack Overflow

Use a function from a .js file in a different .js file

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Related