私の JSFiddle コードが自分の Web サイトで機能しないのはなぜですか?

JSFiddle コードが独自のページで動作しない: JavaScript 実行のトラブルシューティング

次の場合に、JSFiddle で完全に機能するコードが誤動作するという問題が発生しました。自分の Web ページに組み込むことができます。この複雑な問題を解決するために、根本的な原因を詳しく調べてみましょう。

原因は JavaScript コードの配置にあります。 JSFiddle では、これは onload ハンドラーに埋め込まれており、ページ全体が読み込まれた後に確実に実行されます。ただし、ヘッド内でリンクされている HTML/JS および CSS ファイルにコードを直接組み込むと、コードが途中で実行されます。

その時点では、入力要素はまだ解析されていないため、$('input [type="range"]') 結果は得られません。これを解決するには、すべてのページ要素が処理された後にコードを実行する必要があります。

解決策: Onload ハンドラーまたは Document Ready ハンドラー

これを実現するには、次のようにラップします。 onload ハンドラー内のコード:

window.onload = function() {
    // your code here
};

または、jQuery のドキュメントを使用して準備完了handler:

$(document).ready(function() {
    // your code here
});

またはページの最後にスクリプトを含める

もう 1 つのオプションは、ページの最後にスクリプトを含めることです。これにより、スクリプトが実行されることが保証されます。すべての要素が

結論

この問題を解決すると、JavaScript コードが JSFiddle と独自の Web ページの両方で一貫して動作することが保証されます。今後同様の落とし穴が発生しないように、JavaScript コードの実行タイミングを必ず考慮してください。

以上が私の JSFiddle コードが自分の Web サイトで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。