私の JavaScript コードはローカルでは動作するのに、JSfiddle.net では動作しないのはなぜですか?

JavaScript が JSfiddle.net で実行されない

問題:

提供されたコードはライブ サイトでは正しく機能しますが、失敗しますJSfiddle.net で実行すると、「ReferenceError: fillList is not generated」や「ReferenceError: mySelectList is not generated」などのコンソール エラーが発生します。

説明:

指定されたコードでは、関数は onload 関数内で定義されています。これにより、その関数内で関数を参照できるようになりますが、グローバルにアクセスすることはできません。その結果、グローバル名 (fillList() や mySelectList など) を使用して HTML からこれらの関数を参照すると、JSfiddle はそれらを認識できません。

解決策:

この問題には 3 つの主な解決策があります:

a) 関数のグローバル化:

<code class="javascript">window.fillList = function() {};
window.mySelectList = function() {};</code>

このアプローチは関数をグローバルにしますが、関数を汚染するため理想的ではありません。グローバル名前空間。

b) 控えめな JavaScript を使用します:

onload 関数の外側で関数を定義し、JavaScript のみを使用してイベント リスナーをアタッチします:

<code class="javascript">function fillList() {}
function mySelectList() {}

window.onload = function() {
  var e = document.getElementById('elementId');
  e.addEventListener('click', fillList);
};</code>

HTML と JavaScript をこのように分離することはベスト プラクティスです。

c) JSfiddle 設定を変更します:

JSfiddle 設定を「No Wrap (head or body)」に変更します。コードが onload 関数にラップされるのを防ぎます。これにより、関数にグローバルにアクセスできるようになります。

以上が私の JavaScript コードはローカルでは動作するのに、JSfiddle.net では動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。