admin管理员组

文章数量:1279085

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;

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;
  • javascript
  • html
  • canvas
Share Improve this question edited Mar 30, 2013 at 18:40 Samarth Wahal asked Mar 30, 2013 at 18:27 Samarth WahalSamarth Wahal 1711 gold badge2 silver badges12 bronze badges 3
  • 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 Commented Mar 30, 2013 at 18:33
  • 1 "the console is returning errors" ... and which errors would that be? I guess you should have a look at stackoverflow./q/14028959/218196. – Felix Kling Commented Mar 30, 2013 at 18:35
  • 1 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 Commented Mar 30, 2013 at 18:51
Add a ment  | 

3 Answers 3

Reset to default 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.

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.

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

本文标签： javascriptCalling function from external JSStack Overflow

版权声明：本文标题：javascript - Calling function from external JS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741276702a2369769.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。