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

114

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

HTML :

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

자바 스크립트 :

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

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

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

javascript html jsfiddle

— 래리 신나 바
소스

괄호를 제거하면 일반적인 비 바이올린 상황에서도 작동하지만 가능한 한 많이 HTML에서 js를 분리하는 것이 좋습니다. 나는 스타일 = "display : none"CSS 인라인 no-no 만 허용합니다.

— Adrian Bartholomew 2012

관련 : 자바 스크립트 jsfiddle.net에서 실행되고 있지

— BERGI

60

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

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

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

— Tvanfosson
소스

@Innuendo-jsFiddle은 코드 / html / 스타일 시트에 대해 별도의 프레임을 사용합니다. 함수 호출에서 프레임을 참조해야하지만 프레임에 이름이 없기 때문에 그렇게하는 쉬운 방법이 없습니다. jsfiddle이 작동하는 방식 때문에 정말 문제가되지만 자바 스크립트를 완전히 분리하는 것이 좋습니다.

— tvanfosson 2011 년

5

@ tvanfosson- 솔루션은 작동하지만 jsfiddle은 결과를 표시하기 위해 별도의 프레임을 사용하지 않습니다. jsfiddle.net/Yazpj/show를 참조하십시오 . 처음에 작동하지 않는 이유 test는 onLoad함수 내부에 정의되어 있기 때문입니다 . 사용 window.test = function(){/*...*/}하면 완벽하게 잘 작동합니다.

— ellisbben 2011 년

@ellisbben-Firebug를 사용하여 DOM을 검사하면 4 개의 개별 창 각각이 별도의 iframe에 존재합니다.

— tvanfosson 2011 년

1

예,하지만 예제를 보여주기 위해 사용 된 단일 iframe을 살펴보면 프레임을 사용하지 않는 단일 페이지에 모든 코드를 넣는다는 것을 알 수 있습니다. 따라서 이러한 프레임은 예제를 깨뜨릴 수 없습니다. show내가 말하는 내용을 보려면 jsfiddle URL에 추가 하십시오. jsfiddle.net/Yazpj/show

— ellisbben

100

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

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

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

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

— 잘룬
소스

22

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

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

jsFiddle

세부

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

@nnnnnn :

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

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

var test = function(){};

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

test = function(){};

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

이것이 왜 작동합니까?

@zalun처럼 말하십시오 :

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

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

test = function(){};

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

참고 문헌 :

— R3tep
소스

2

이것은 JSFiddle에서 아주 작은 코드를 테스트하는 것입니다.

— DOK

그러나 이것이 작동하는 이유 는 무엇입니까? 제공 한 "추가 정보"링크는 문제가 범위와 관련이 있거나 test = (없이 var) 라고 말하면 문제가 해결되는 이유를 설명하지 않습니다 .

— nnnnnn

@ R3tep 잘 첫 번째 링크 : jsfiddle.net/R3tep/Yazpj/1406 경고는 나를 위해 아무것도하지 않습니다. 나는 크롬에있다.

— Ced

@ R3tep 예, console.log와 함께 작동합니다. 나는 경고 상자가 없다는 사실이 iframe과 관련된 다른 문제와 관련이 있다고 믿기 때문에 질문을 게시 할 것입니다.

— Ced

1

@ R3tep 나는 당신이 나를 오해했다고 생각하지만 나는 확실하지 않습니다. 귀하의 코드는 훌륭합니다. JSFiddle이 코딩되는 방식에 문제가 있습니다 (결과를 표시하는 데 사용하는 iframe의 샌드 박스 속성에 누락 된 값). 따라서 일부 버전의 크롬에서는 작동하지 않습니다. 나는 그들의 github에 문제 보고서를 보냈습니다. 나는 내 웹 사이트에서 내가 겪고있는 문제가 똑같지 만 아니라고 생각했기 때문에 그것에 관심이 많았다. 건배.

— Ced

3

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

— 학계
소스

-1

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

— Omjjh
소스

-1

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

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

— 무슬림 무 니르
소스

-3

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");
}

— 이반
소스