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
– plalx, Commented Mar 30, 2013 at 18:33
"the console is returning errors" ... and which errors would that be? I guess you should have a look at stackoverflow.com/q/14028959/218196. — Felix Kling
– Felix Kling, Commented Mar 30, 2013 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
– jfriend00, Commented Mar 30, 2013 at 18:51

jfriend00 · Accepted Answer · 2013-03-30 18:38:52Z

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, 2013 at 18:38

answered Mar 30, 2013 at 18:33

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

2 Comments

jfriend00 Over a year ago

@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 Over a year ago

@SamarthWahal - I added another problem to my answer.

What have you tried · Accepted Answer · 2013-03-30 18:29:14Z

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, 2013 at 18:29

What have you tried

11.2k4 gold badges35 silver badges45 bronze badges

3 Comments

What have you tried Over a year ago

@samarth I've added a small edit. Are you sure you've included the right path to the file?

What have you tried Over a year ago

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

Samarth Wahal Over a year ago

The path of the file is perfectly correct. I've edited the question and added the errors.

Daniel · Accepted Answer · 2013-03-30 18:56:30Z

0

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

answered Mar 30, 2013 at 18:56

Daniel

4,9643 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

Calling function from external JS

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related