web-dev-qa-db-ja.com

JavaScriptがJSFiddleで動作しないのはなぜですか？

この JSFiddle の問題を見つけることはできません。

HTML：

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

JavaScript：

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

そして、ボタンをクリックしても、何も起こりませんでした。コンソールには「テストが定義されていません」と表示されます

私はJSFiddleのドキュメントを読みました。そこでは、JSコードが<head>に追加され、HTMLコードが<body>に追加されると書かれています（したがって、このJSコードはhtmlより前で動作します）。

javascripthtmljsfiddle
111
Larry Cinnabar

関数はロードハンドラー内で定義されているため、別のスコープ内にあります。 @ellisbbenがコメントで指摘しているように、windowオブジェクトで明示的に定義することでこれを修正できます。さらに良いのは、ハンドラをオブジェクトに目立たないように適用するように変更することです。 http://jsfiddle.net/pUeue/

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

インラインではなく、この方法でハンドラーを適用すると、HTMLがクリーンに保たれます。私はjQueryを使用していますが、フレームワークの有無にかかわらず、または必要に応じて別のフレームワークを使用して実行できます。

60
tvanfosson

ラップ設定を指定しない場合、デフォルトで「onLoad」になります。これは、結果が読み込まれた後に実行される関数ですべてのJavaScriptがラップされる結果になります。すべての変数はこの関数に対してローカルであるため、グローバルスコープでは使用できません。

ラッピング設定を「ラップなし」に変更すると、機能します。

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

使用しないので、フレームワークを「ライブラリなし」に切り替えました。

97
zalun

別の方法があります。関数を次のような変数に宣言します。

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

jsFiddle

詳細

EDIT（@nnnnnnのコメントに基づく）

@ nnnnnn：

なぜtest =（varなし）は修正しますか？

このような関数を定義する場合：

var test = function(){};

関数はローカルで定義されますが、varなしで関数を定義する場合：

test = function(){};

testは、トップレベルのスコープにあるwindowオブジェクトで定義されます。

なぜこれが機能するのですか？

@zalunのように言う：

ラップ設定を指定しない場合、デフォルトで「onLoad」になります。これは、結果が読み込まれた後に実行される関数ですべてのJavaScriptがラップされる結果になります。すべての変数はこの関数に対してローカルであるため、グローバルスコープでは使用できません。

しかし、この構文を使用する場合：

test = function(){};

グローバルに定義されているため、関数testにアクセスできます。

参照：

21
R3tep

[フレームワークと拡張機能]パネルの折り返し設定を[折り返しなし<body> "

3
Academia