내 JavaScript가 JSFiddle에서 작동하지 않는 이유는 무엇입니까?

이 JSFiddle 의 문제점을 찾을 수 없습니다 .

HTML :

<input type="button" value="test" onclick="test()">

자바 스크립트 :

function test(){alert("test");}

그리고 버튼을 클릭해도 아무 일도 일어나지 않았습니다. 콘솔에 "테스트가 정의되지 않았습니다"라고 표시됩니다.

JSFiddle 문서를 읽었습니다. 거기에 JS 코드가 추가 <head>되고 HTML 코드가 추가 되었다고합니다 (따라서이 <body>JS 코드는 html보다 이전 버전이므로 작동해야합니다).

함수가로드 핸들러 내부에 정의되고 있으므로 다른 범위에 있습니다. @ellisbben이 주석에서 언급했듯이 window객체 에 명시 적으로 정의하여이를 수정할 수 있습니다 . 더 나은 방법은 객체에 처리기를 눈에 띄지 않게 적용하도록 변경하는 것입니다. http://jsfiddle.net/pUeue/

$('input[type=button]').click( function() {
   alert("test");   
});

인라인 대신 이런 방식으로 핸들러를 적용하면 HTML이 깨끗하게 유지됩니다. 저는 jQuery를 사용하고 있지만 원하는 경우 프레임 워크를 사용하거나 사용하지 않고 다른 프레임 워크를 사용할 수 있습니다.

랩 설정을 지정하지 않으면 기본값은 "onLoad"입니다. 결과가로드 된 후 실행되는 함수에서 모든 JavaScript가 래핑됩니다. 모든 변수는이 함수에 로컬이므로 전역 범위에서 사용할 수 없습니다.

포장 설정을 "포장 없음"으로 변경하면 작동합니다.

http://jsfiddle.net/zalun/Yazpj/1/

사용하지 않는 프레임 워크를 "No Library"로 변경했습니다.

또 다른 방법은 다음과 같은 변수로 함수를 선언하는 것입니다.

test = function() {
  alert("test");
}

jsFiddle

세부

편집 (@nnnnnn의 주석에 따라)

@nnnnnn :

왜 test =(없이 var) 그것을 고칠까요?

다음과 같은 함수를 정의 할 때 :

var test = function(){};

함수는 로컬로 정의되지만 다음없이 함수를 정의 할 때 var:

test = function(){};

testwindow최상위 범위 에있는 개체 에 정의됩니다 .

이것이 왜 작동합니까?

@zalun처럼 말하십시오 :

랩 설정을 지정하지 않으면 기본값은 "onLoad"입니다. 결과가로드 된 후 실행되는 함수에서 모든 JavaScript가 래핑됩니다. 모든 변수는이 함수에 로컬이므로 전역 범위에서 사용할 수 없습니다.

그러나이 구문을 사용하는 경우 :

test = function(){};

함수는 test전역 적으로 정의 되어 있으므로 액세스 할 수 있습니다.

참고 문헌 :

• https://stackoverflow.com/a/338053/3083093
• https://stackoverflow.com/a/5830423/3083093

Frameworks & Extensions 패널에서 랩 설정을 "랩인 없음 <body>"으로 변경합니다.

코드에는 문제가 없으며 오른쪽에서 onLoad () 확장자를 선택하기 만하면됩니다.

<script> 
function test(){
 alert("test");   
}
</script>

<input type="button" value="test" onclick="test()">

Select OnDomready

HTML :

<input id="dButton" type="button" value="test"/>

자바 스크립트 :

addEventListener('load', init, false);

function init()
{
  oInput = document.getElementById('dButton');
  oInput.onclick = test;
}

function test(){
  alert("test");
}