참조 오류 : functionName이 정의되지 않았습니다.

Question

HTML 요소의 onClick="functionName()" 속성을 사용하여 함수를 실행할 때 functionName이 정의되지 않았다고 말합니다.

하지만 정의되었습니다!

function functionName() { 
    //functional stuff 
} 

가 나는 또한 시도 :

$(document).ready(function() { 
    function functionName() { 
     //functional stuff 
    } 
}) 

하지만 HTML 파일에 영향

없었다 버튼이 여기

html body div table tbody tr td button 

하고 스크립트 태그는 여기

입니다

html head script 

누군가 이런 일이 발생하는 이유를 설명해주십시오.

Answer 1

파서가 구문 분석 한 onClick 특성으로 이벤트 처리기를 만들었으므로 OnReady가 실패해야합니다. 이 경우 click 이벤트는 존재하지 않는 (null) 함수 참조를 가리키고 있습니다. 이 바이올린 http://jsfiddle.net/muglio/gzeksLr5/1/로 표시

() 실패한

제 바이올린 헤드 태그 인라인 스크립트를 나타낸다. 이 경우 브라우저는 이미 구문 분석하여 onClick 속성에 도달하기 전에 functionName을 DOM에 추가했습니다.

작품 http://jsfiddle.net/muglio/LoL9Ldzr/1/

당신이 다음 동일한 스크립트 것을 가져다가 외부 파일 "functionName.js"에 넣어라는 경우는 경쟁 조건에 대한 가능성을 만들 것입니다 머리에 같은 장소에서로드.

스크립트는 onclick 속성이 구문 분석되기 전이나 후에로드 될 수 있습니다. 보증하지 않습니다.

일반적으로 인라인 CSS를 피하기 위해 인라인 자바 스크립트를 사용하지 않는 것이 좋습니다. 컨트롤러와 뷰를 결합하지 않으려면 javascript에서 onclick 핸들러를 설정해야합니다.

<script> 
    //Using jquery here because it is clearly being used in the initial ask :) 
    $(document).ready(function(){ 
     function functionName() { 

     } 

     $('#myButton').on('click',functionName); 
    }); 
</script> 

html body div table tbody tr td <button id="myButton"></button> 

희망이 도움이 될 것입니다.