Calling function from external JS

Question

I am trying to call a function from an external .js file but the console is returning errors and the function is not being called. How do I correct my code and be able to call the function properly.

Here is the main .html file:

<html>
<head>
    <script type="text/javascript" src="xp.js">
    </script>
    <script type="text/javascript">
        window.onload = xyz.makeShape.Circle();
    </script>
</head>
<body>
    <canvas id="xyz" width="600" height="600"></canvas>
</body>
</html>

And here is the .js file:

var xyz = xyz || {};
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
xyz.makeShape = {
    Circle : function() {
        console.log('working');
    }
}

EDIT

I am getting 2 errors in the console:

Error 1

TypeError: canvas is null
window.onload = xyz.makeShape.Circle;

Error 2

TypeError: xyz.makeShape is undefined
window.onload = xyz.makeShape.Circle;

`window.onload = xyz.makeShape.Circle();` should be `window.onload = xyz.makeShape.Circle;`, also you have to wait until the document is loaded before you can get references to DOM elements, here `canvas` and `context` will be undefined. — plalx, Mar 30 '13 at 18:33
*"the console is returning errors"* ... and which errors would that be? I guess you should have a look at http://stackoverflow.com/q/14028959/218196. — Felix Kling, Mar 30 '13 at 18:35
In the future, if you had included the error information in your original question, your question would have been answered in a couple minutes rather than requiring all this back and forth discussion to figure out what you're seeing. Anyway, glad you got it solved eventually. — jfriend00, Mar 30 '13 at 18:51

jfriend00 · Accepted Answer · 2013-03-30T18:38:52.850

5

Change this:

window.onload = xyz.makeShape.Circle();

to this:

window.onload = xyz.makeShape.Circle;

window.onload needs to be set to a function reference, not to the results of calling a function.

You also can't do these two lines from the <head> section before the DOM is loaded:

var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');

You need to execute those after the DOM has been loaded. There are multiple possible strategies for doing that. The easiest for what you already have would be to execute them in your onload handler since you know the DOM is already loaded there. You could also move the script tag that loads your external .js file to the end of the <body> section and the DOM will already be ready then when that js file runs.

edited Mar 30 '13 at 18:38

answered Mar 30 '13 at 18:33

jfriend00

683,504
96
985
979

2

@SamarthWahal - come on now. "It's still not working" tells us absolutely NOTHING about what you see. Do you expect us to guess? Help out the people who are trying to help you by describing exactly what's going on and what's in the error console. – jfriend00 Mar 30 '13 at 18:36
@SamarthWahal - I added another problem to my answer. – jfriend00 Mar 30 '13 at 18:37

score 0 · Answer 2 · answered Mar 30 '13 at 18:29

0

You will just need to include the js file using the <script> tags - either in your header or footer.

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

Now you can call functions from that script as if they were in the current file

Edit

If you're sure that the file is already included (first make sure you've got the path right) next you need to check your console from errors that may be arising from the included file. The code you've supplied looks right.

answered Mar 30 '13 at 18:29

What have you tried

11,018
4
31
45

@samarth I've added a small edit. Are you *sure* you've included the right path to the file? – What have you tried Mar 30 '13 at 18:31
@jfriend00 common mistake :) - But yes, I see that the OP *thinks* the file has been included, that doesn't mean that the path is right though. – What have you tried Mar 30 '13 at 18:34
The path of the file is perfectly correct. I've edited the question and added the errors. – Samarth Wahal Mar 30 '13 at 18:44

score 0 · Answer 3 · answered Mar 30 '13 at 18:56

External js:

var xyz = xyz || {};
xyz.makeShape = {
    Circle: function () {
        console.log('working');
    }
}

Internal js:

window.onload = function () {
    var canvas = document.getElementById('xyz');
    var context = canvas.getContext('2d');
    xyz.makeShape.Circle();

}

Tested and works

Calling function from external JS

3 Answers3

Linked