내 JSFiddle JavaScript를 내 웹 페이지로 이동할 때 왜 작동이 중단됩니까?

JSFiddle Code Enigma: 자신의 페이지에서 JavaScript 문제 해결

이 흥미로운 수수께끼에서 우리는 JSFiddle 코드의 미스터리를 파헤칩니다. 창조자의 범위 내에서는 완벽하게 기능하지만 자신의 영역에 이식되면 불안정해집니다. 웹페이지. 이 이상한 행동 뒤에 숨은 비밀을 밝혀 보겠습니다.

검사: 코드 분석

제공된 샘플 코드는 다음과 같은 사용자 인터페이스를 보여줍니다. 입력 범위 요소와 CSS 및 JavaScript 코드를 지원합니다. CSS가 예상대로 렌더링되는 동안 JavaScript는 휴면 상태로 유지되어 원하는 기능이 충족되지 않은 상태로 유지됩니다.

Revelation: The Allure of the Head

이를 이해하는 열쇠 수수께끼는 HTML 구조 내의 코드 배치에 있습니다. JSFiddle에서 JavaScript는 "onload" 핸들러 내에서 실행되어 전체 페이지가 로드된 후에 실행되도록 합니다. 그러나 자신의 웹 페이지에서 코드는 입력 요소가 구문 분석되기 전에 실행되는 에 배치됩니다.

해결 방법: 실행 조정

이 불규칙성을 바로잡기 위해서는 관련 요소가 렌더링된 후에 JavaScript 실행이 발생하도록 구성해야 합니다. 한 가지 접근 방식은 JSFiddle의 예시처럼 onload 핸들러에서 코드를 래핑하는 것입니다.

<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