2013-03-30 3 views
1

외부 .js 파일에서 함수를 호출하려고하지만 콘솔에서 오류가 반환되고 함수가 호출되지 않습니다. 코드를 수정하고 제대로 함수를 호출 할 수 있어야합니다. 여기 외부에서 함수 호출 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'); 
    } 
} 



편집
내가 콘솔에서이 오류를 얻고있다 :

오류 1

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


오류 2

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

'위해 window.onload = xyz.makeShape.Circle() 테스트 및 작동;해야''창로드 = xyz.makeShape.Circle;', DOM 요소에 대한 참조를 얻기 전에 문서가로드 될 때까지 기다려야합니다. 여기서'canvas'와'context'는 정의되지 않습니다. – plalx

+1

* "콘솔이 오류를 반환하고 있습니다"* ... 그리고 어떤 오류가 있습니까? 나는 당신이 http://stackoverflow.com/q/14028959/218196을 봐야한다고 생각한다. –

+1

앞으로는 원래 질문에 오류 정보를 포함시킨 경우,보고있는 내용을 파악하기 위해 앞뒤로 모든 토론을하지 말고 몇 분 안에 질문에 대한 답변을 얻었을 것입니다. 어쨌든, 다행히 결국 해결하게 된 것을 기쁘게 생각합니다. – jfriend00

답변

3

변경이이 행

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

:

window.onload = xyz.makeShape.Circle; 

window.onload 요구가 아닌 함수 호출의 결과에 함수 기준으로 설정한다.


또한 DOM 전에 <head> 섹션에서이 두 줄을로드 할 수 없습니다 :

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

당신은 DOM이로드 된 후 사람들을 실행해야합니다. 이를위한 여러 가지 가능한 전략이 있습니다. 이미 DOM에로드되어 있다는 것을 알고 있기 때문에 이미 가지고있는 것 중 가장 쉬운 것은 onload 핸들러에서 실행하는 것입니다. 또한 외부 .js 파일을로드하는 스크립트 태그를 <body> 섹션의 끝으로 옮길 수 있으며 js 파일이 실행될 때 DOM이 이미 준비되어있을 것입니다.

+0

아직 작동하지 않습니다. –

+2

@SamarthWahal - 지금 시작하십시오. "아직도 작동하지 않는다"는 것은 당신이 보는 것에 대해 전혀 아무것도 말해주지 않는다. 우리가 추측하기를 기대합니까? 진행중인 작업과 오류 콘솔의 내용을 정확히 설명하여 도움을 요청하는 사람들을 도우십시오. – jfriend00

+0

@SamarthWahal - 내 대답에 또 다른 문제가 추가되었습니다. – jfriend00

0

당신은 단지를 포함해야합니다 js<script> 태그를 사용하여 파일을 머리글 또는 바닥 글에 추가하십시오. 이 파일이 이미 포함되어 있는지 경우가 현재 파일에있는 것처럼

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

이제 당신이 스크립트에서 함수를 호출 할 수 있습니다

편집

(먼저 확인 다음에 당신은 포함 된 파일에서 발생할 수있는 오류를 콘솔에서 확인해야합니다. 제공 한 코드가 올바르게 보입니다.

+0

이미 포함되어 있습니다. – jfriend00

+0

@samarth 작은 편집을 추가했습니다. 파일에 대한 올바른 경로를 포함 했습니까? –

+0

나는 OP가 아니다. – jfriend00

0

외부 JS :

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

내부 JS :

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

}