JavaScript를 사용하여 동일한 클래스의 요소로 표시된 여러 위치에서 하나의 값을 표시하려면 어떻게해야합니까?

Question

동일한 클래스로 표시된 지정된 요소에 동일한 텍스트 값을 표시하려고합니다. 기본적으로이 텍스트는 양식 입력 태그에서 가져온 값입니다. 텍스트 값을 수집하려면 getElementById 및 다음 getElementsByClassName 페이지의 지정된 위치에 텍스트 값을 바꿀 JavaScript를 사용하여이 작업을 시도하고있다. HTML에서 먼저 다음 코드를 참조하십시오 다음 JS 파일에

collective noun: <input type="text" id="noun1" onkeypress="runGather()"><br> 
    something the <i class="collective_noun">collective noun</i> can make: <input type="text" id="noun2"><br> 
    adj describing <i class="collective_noun">collective noun</i>: <input type="text" id="adj"><br> 

다음 : 당신은 collective_noun을 설정하는

function runGather() { 
    var noun1 = document.getElementById("noun1").value; 
    var collective_noun = document.getElementsByClassName("collective_noun").value; 
    for (var i = 0; i < noun1.length; i++) { 
     collective_noun[i].innerHTML = noun1; 
    } 
} 

Answer 1

을 단지 당신이 반환되는 노드 목록을 사용하려면 값과에 노드의 값인 noun1을 반복하려고합니다. 대신이 시도 :

이

var i, l, 
    noun_1, 
    collective_nouns; 

noun_1 = document.getElementById('noun_1').value; 
collective_nouns = document.getElementsByClassName('collective_noun'); 
for (i = 0, l = collective_nouns.length; i < l; i += 1) { 
    collective_nouns[i].innerHtml = noun1; 
} 

Answer 2

대신 일반 자바 스크립트를 사용하여, 당신은 자신에게 두통을 저장하고 jQuery를 사용할 수 있습니다.

$(".collective_noun").text($("#noun1").val());