왜이 자바 스크립트는 페이지 당 한 번만 실행됩니까?

Question

내 웹 사이트에는 Try-it-Yourself 섹션이 있지만, 여러 가지 Try-it-Yourself 섹션을 원할 때 어떤 이유로 페이지 상단의 섹션에서만 작동합니다. 따라서 페이지에 세 개가 있으면 원하는대로 작동하지만 다음 두 개는 아무 것도하지 않습니다.

<div class="tryit"> 
<table> 
<tr> 
    <td>Try It Yourself</td> 
</tr> 

<tr> 
    <td><textarea id="input" rows="10" cols="47"></textarea></td> 
</tr> 

<tr> 
    <td><input onclick="update();" type="button" value="Update"></td> 
</tr> 

<tr> 
    <td><iframe id="output" name="output" width="600" height="300" ></iframe></td> 
</tr> 
</table> 
</div> 

그리고 다음 자바 스크립트 :

function update() 
{ 
    var tryitoutput = document.getElementById('input').value; 
    window.frames['output'].document.documentElement.innerHTML = tryitoutput; 
} 

감사합니다

나는 다음과 같은 HTML이있다.

Answer 1

다른 언급처럼, 하나 이상의 HTML 요소 동일한 ID 속성 값을가집니다. 귀하의 경우 자바 스크립트는 첫 번째 요소 만 찾는다. 그 이유는 나중에 업데이트 버튼에서 작동하지 않기 때문이다. 가장 간단한 방법은 서로 다른 "그것을 시도 자신을"상자에 대해 서로 다른 ID 속성 값을 설정하는 것입니다 :

Slightly modify your JS, see following jsFiddle example

function update(tryItIndex) { 
    var tryItOutput = document.getElementById('input-' + tryItIndex).value; 
    window.frames['output-' + tryItIndex].document.documentElement.innerHTML = tryItOutput; 
} 

Answer 2

왜냐하면 텍스트 영역과 id를 통한 출력을 참조하기 때문입니다. 즉, 항상 첫 번째 텍스트를 검색한다는 의미입니다. 빠른 수정은이 필드에 대해 고유 한 ID를 가지며 update (inputId, outputId)와 같은 업데이트 함수에 매개 변수로 이름을 보냅니다.