Sam*_*hal 1 html javascript html5 canvas
我试图从外部.js文件调用一个函数,但控制台返回错误,并且没有调用该函数.如何更正我的代码并能够正确调用该函数.
这是主要的.html文件:
<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>
这是.js文件:
var xyz = xyz || {};
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
xyz.makeShape = {
Circle : function() {
console.log('working');
}
}
编辑
我在控制台中收到2个错误:
错误1
TypeError: canvas is null
window.onload = xyz.makeShape.Circle;
错误2
TypeError: xyz.makeShape is undefined
window.onload = xyz.makeShape.Circle;
改变这个:
window.onload = xyz.makeShape.Circle();
对此:
window.onload = xyz.makeShape.Circle;
window.onload 需要设置为函数引用,而不是调用函数的结果.
<head>在加载DOM之前,您也无法从该部分执行以下两行:
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
您需要在加载DOM后执行这些操作.这样做有多种可能的策略.您已经拥有的最简单的方法是在onload处理程序中执行它们,因为您知道DOM已经加载到那里.您还可以移动脚本标记,将外部.js文件加载到该<body>部分的末尾,并且DOM已经准备就绪,然后运行该js文件.