私の JSFiddle コードが Web サイトで動作しないのはなぜですか?

JSFiddle コードが個人ページで実行に失敗する: 解決策

JSFiddle では正常に実行されたにもかかわらず、個人 Web ページに統合すると特定のコードが実行に失敗します。この問題の詳細な分析は次のとおりです。

当初、提供された HTML、CSS、および JavaScript コードは、ローカル Web ページ上で必要な機能をレンダリングしません。 CSS スタイルは適用されますが、JavaScript 部分は非アクティブなままです。

根本原因:

重大なエラーは、JavaScript コードの配置に起因します。質問で述べたように、「コードを取得して HTML/JS (head にリンク) を挿入すると、 内のコードの配置は、

理由:

コードが実行されるとき、対象となる入力要素はまだ解析されていません。この結果、$('input[type="range"]') セレクターは要素の検索に失敗します。

解決策:

これを解決するには、次のことを確認してください。 JavaScript コードは、入力要素が解析された後に実行されます。これは、さまざまな方法で実現できます。

• オンロード ハンドラー: コードを onload ハンドラー内に囲み、ページが完全に読み込まれた後にのみ実行されるようにします。
• Document Ready Handler (jQuery): jQuery の document Ready ハンドラーを使用します。 $(document).ready(function() { ... }) またはそのショートカット $(function() { ... }) を使用して、DOM の準備ができた後にコードを実行します。
• スクリプト配置: Web ページの最後にスクリプトを組み込み、対象の要素が解析された後にスクリプトが確実に実行されるようにします。

1 つを実装することで、これらのソリューションでは、JavaScript コードが意図したとおりに機能し、Web ページに望ましい効果をもたらします。

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