자바 스크립트, 되풀이 루프

Question

문제점이 있습니다 ... 어떻게이 두 텍스트 필드에 개별적으로 넣은 것을 표시 할 수 있습니까?

<input type="text" id="userInput"></input> <button id="submitter">Submit</button> 
<div id="output" style="white-space: pre-wrap; display: inline;"></div> 

<input type="text" id="userInput"></input> <button id="submitter">Submit</button> 
<div id="output" style="white-space: pre-wrap; display: inline;"></div> 

<script type="text/javascript"> 
     var didClickIt = false; 
     document.getElementById("submitter").addEventListener("click",function(){ 
      // same as onclick, keeps the JS and HTML separate 
      didClickIt = true; 
     }); 

     setInterval(function(){ 
      // this is the closest you get to an infinite loop in JavaScript 
      if(didClickIt) { 
       didClickIt = false; 
       // document.write causes silly problems, do this instead (or better yet, use a library like jQuery to do this stuff for you) 
       var o=document.getElementById("output"),v=document.getElementById("userInput").value; 
       if(o.textContent!==undefined){ 
        o.textContent=v; 
       }else{ 
        o.innerText=v; 
       } 
      } 
     },500); 
</script> 

내 문제는 값이 입력 될 때 상자 중 하나가 일을 해달라고입니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

두 입력은 당신이 그들 중 하나를 변경하고 당신은 두 텍스트 필드와 버튼에 두 개의 서로 다른 ID를 가지고 그들에게 클릭 이벤트를 추가해야 다른

Answer 2

에 리스너를 추가해야 동일한 ID를 가지고있다.

Answer 3

id 페이지에서 반복 할 수 없으면 잘못된 문서로 끝나고 예상 한대로 작동하지 않는 문서로 끝납니다. 대신

이 요소를 공통 클래스를 제공하고 document.querySelectorAll로를 검색 한 후 둘 에 이벤트를 걸고 참조 코멘트 :

// Get all buttons 
 
var buttons = document.querySelectorAll(".submitter"); 
 

 
// Loop through them setting up handlers 
 
Array.prototype.forEach.call(
 
    buttons, 
 
    function(button, index) { 
 
    button.addEventListener("click", function(e) { 
 
     // Call our handler, telling it which button was clicked 
 
     return handleClick(e, this, index); 
 
    }, false); 
 
    } 
 
); 
 

 
// Handle a click 
 
function handleClick(e, button, index) { 
 
    // Get the userInput and output elements with the same index 
 
    var userInput = document.querySelectorAll(".userInput")[index]; 
 
    var output = document.querySelectorAll(".output")[index]; 
 
    if (userInput && output) { 
 
    // Display the output 
 
    output.innerHTML = ""; 
 
    output.appendChild(
 
     document.createTextNode(userInput.value) 
 
    ); 
 
    } 
 
}

<input type="text" class="userInput"> 
 
<button class="submitter">Submit</button> 
 
<div class="output" style="white-space: pre-wrap; display: inline;"></div> 
 
<input type="text" class="userInput"> 
 
<button class="submitter">Submit</button> 
 
<div class="output" style="white-space: pre-wrap; display: inline;"></div>

는 "배열을 참조하십시오 와 같은 "this answer 부분은 이상한 Array.prototype.forEach.call 전화를 이해합니다.

// Get all buttons 
 
var buttons = document.querySelectorAll(".submitter"); 
 

 
// Loop through them setting up handlers 
 
Array.prototype.forEach.call(
 
    buttons, 
 
    function(button) { 
 
    button.addEventListener("click", handleClick, false); 
 
    } 
 
); 
 

 
// Handle a click 
 
function handleClick(e) { 
 
    // Get the userInput and output elements that are in the same 
 
    // container element 
 
    var parent = this.parentNode; 
 
    var userInput = parent.querySelector(".userInput"); 
 
    var output = parent.querySelector(".output"); 
 
    if (userInput && output) { 
 
    // Display the output 
 
    output.innerHTML = ""; 
 
    output.appendChild(
 
     document.createTextNode(userInput.value) 
 
    ); 
 
    } 
 
}

<div><!-- This is the wrapper --> 
 
    <input type="text" class="userInput"> 
 
    <button class="submitter">Submit</button> 
 
    <div class="output" style="white-space: pre-wrap; display: inline;"></div> 
 
</div> 
 
<div><!-- This is the wrapper --> 
 
    <input type="text" class="userInput"> 
 
    <button class="submitter">Submit</button> 
 
    <div class="output" style="white-space: pre-wrap; display: inline;"></div> 
 
</div>

:

는, 내가 아마이 훨씬 쉽게하기 위해 약간 HTML을 변경 것이라고 생각하지만, userInput, submitter의 각 깡패 주위에 래퍼 요소를 넣어, 그리고 output 요소 가졌어요

Answer 4

요약하면 동일한 ID를 가진 여러 요소를 가질 수 없습니다. 입력과 버튼의 ID를 변경하는 것 외에도 출력 div의 ID를 변경하려고합니다.