jsfiddle.net で JavaScript コードが失敗する理由

提供されたコードは、jsfiddle.net で実行しようとすると問題が発生し、コンソールに「ReferenceError: Function Name」が記録されます。定義されていません。」これを理解するために、コードの構造を詳しく調べ、jsfiddle 内での実行を分析します。

このコードでは、BetterSelect や fillList などの関数が関数内で定義されています。 ウィンドウ.オンロード。一般的な Web 環境では、この関数により、ウィンドウが読み込まれた後にコードが確実に実行されます。ただし、jsfiddle のフレームワーク内では、この側面により重要な違いが導入されます。

コードがライブ サイトで実行される場合、関数は特定の関数スコープの外で定義されているため、ウィンドウ オブジェクト内でグローバルに使用できます。ただし、jsfiddle では、関数は window.onload 関数のスコープ内でのみアクセスできます。

この問題にはいくつかの解決策があります:

1. 関数のグローバル定義: 関数の宣言を window.functionName = に変更します。 function(){};.
2. 目立たない JavaScript: HTML を JS から分離して、JS のみを介して DOM 要素に動作を付加します。
3. jsfiddle のデフォルトのラッピングを無効にする: 「ラップなし」を選択します ( "onLoad."

このスコープの問題に対処することで、 JavaScript コードはライブ サイトと jsfiddle.net の両方で正しく実行されます。