JavaScriptがJSFiddleで機能しないのはなぜですか？

114

このJSFiddleの何が問題なのかわかりません。

HTML：

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

JavaScript：

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

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

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

javascript html jsfiddle

— ラリー・シナバー
ソース

かっこを削除することは、通常のフィドル以外の状況でも機能しますが、HTMLからjsをできるだけ分離することは間違いなく良いアドバイスです。私はスタイル= "display：none" CSSインラインno-noのみを許可しています。

— Adrian Bartholomew

関連：JavaScriptがjsfiddle.net上で実行されていない

— Bergi

60

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

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

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

— Tvanfosson
ソース

@Innuendo-jsFiddleは、code / html / styleシートに個別のフレームを使用します。関数呼び出しでフレームを参照する必要がありますが、フレームには名前がないため、これを行う簡単な方法はありません。jsfiddleの動作方法が原因で実際に問題が発生しますが、JavaScriptを完全に分離することをお勧めします。

— tvanfosson 2011年

5

@ tvanfosson-ソリューションは機能しますが、jsfiddleは結果を表示するために個別のフレームを使用しません。jsfiddle.net/Yazpj/showを参照してください。最初に機能しなかった理由testは、onLoad関数内で定義されたためです。を使用window.test = function(){/*...*/}すると、完全にうまく機能します。

— ellisbben

@ellisbben-Firebugを使用してDOMを検査する場合、4つの個別のペインはそれぞれ個別のiframeに存在します。

— tvanfosson 2011

1

はい。ただし、例を示すために使用された単一のiframeを調べると、フレームを使用しない単一のページにすべてのコードが配置されていることがわかります。追加showjsfiddle.net/Yazpj/show：私が話しているかを確認するにはどのjsfiddle URLへ

— ellisbben

100

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

折り返しの設定を「折り返しなし」に変更すると機能します。

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

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

— ザルン
ソース

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 2014年

しかし、なぜこれが機能するのでしょうか？あなたが提供した「詳細情報」リンクは、問題がスコープに関連していること、またはtest = （なしでvar）言うことがそれを修正する理由を説明していません。

— nnnnnn

@ R3tep最初のリンクであるjsfiddle.net/R3tep/Yazpj/1406 アラートは、私には何もしません。私はクロームです。

— Ced

@ R3tepええ、それはconsole.logで動作します。私がSOに質問を投稿するのは、警告ボックスがないという事実が、iframeで発生した別の問題に関連していると思うからです。

— Ced

1

@ R3tep誤解されていると思いますが、よくわかりません。あなたのコードは良いです。JSFiddleのコーディング方法に問題があります（結果の表示に使用しているiframeのサンドボックス属性に値がありません）。そのため、一部のバージョンのChromeでは動作しません。彼らのgithubに問題レポートを送信しました。私のウェブサイトで発生している問題は同じだと思いましたが、そうではなかったので、私はそれに非常に興味を持っていました。乾杯。

— Ced

3

「フレームワークと拡張機能」パネルの折り返し設定を「折り返しなし<body>」に変更します

— アカデミア
ソース

-1

コードに問題はありません。右側から拡張onLoad（）を選択するだけです。

— オムジ
ソース

-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"/>

JavaScript：

addEventListener('load', init, false);

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

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

— イワン
ソース