JSFiddle JavaScript を自分の Web ページに移動すると壊れるのはなぜですか?

JSFiddle コードの謎: 自分のページで JavaScript の問題を解決する

この興味深い難問では、JSFiddle コードの謎を掘り下げます。作成者の範囲内では完璧に機能しますが、失敗します。自分のウェブページに移植する場合。この奇妙な動作の背後にある秘密を明らかにしましょう。

検査: コードの構造の詳細

提供されたサンプル コードは、次のようなユーザー インターフェイスを示しています。入力範囲要素とサポートされる CSS および JavaScript コード。 CSS は期待どおりにレンダリングされますが、JavaScript は休止状態のままで、必要な機能が実現されないままになります。

gt;啓示: 頭の魅力

これを理解するための鍵謎は、HTML 構造内のコードの配置にあります。 JSFiddle では、JavaScript は「onload」ハンドラー内で実行され、ページ全体が読み込まれた後に確実に実行されます。ただし、独自の Web ページでは、コードは に配置され、入力要素が解析される前に実行されます。

解決策: 実行の調整

この不規則性を修正するには、関連する要素がレンダリングされた後に JavaScript の実行が行われるように調整する必要があります。 1 つのアプローチは、JSFiddle:

<br>onload = function() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// your code here