私の JSFiddle コードがローカル HTML ページで機能しないのはなぜですか?

JSFiddle コードがローカル Web ページで機能しない

この問題は、JSFiddle 内で機能するコードを HTML ページに統合しようとすると発生します。 HTML、CSS、JavaScript コンポーネントが組み込まれているにもかかわらず、JavaScript 部分の実行に失敗します。

コードを確認すると、HTML 要素と CSS 要素が正しく実装されていることがわかります。ただし、JavaScript コードは

内に記述されます。 HTML ページのセクション。このコンテキストでは、JavaScript の実行は、DOM 要素 ( など) が初期化される前に発生します。したがって、jQuery セレクター $('input[type="range"]') はターゲット要素を見つけることができず、JavaScript コードが失敗します。

これを修正するには、JavaScript コードがDOM 要素が解析されました。これは、

1. onload ハンドラー内でコードをラップする:

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

2. jQuery のドキュメント準備完了ハンドラーを利用する:

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

または、JavaScript コードを最後に配置することもできます。 HTML ページの内容を変更して、操作する要素が解析された後に確実に実行されるようにします。

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