JavaScript, повторяющаяся петля

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

Два входа имеют одинаковый идентификатор, вы должны изменить один из них и добавить слушателя к другому

Answer 2

Вы должны иметь два различных идентификаторов для обоих текстовых полей и кнопок и добавить событие нажатия на них.

Answer 3

id s не может быть повторен на странице, вы получаете недопустимый документ и тот, который не ведет себя так, как вы ожидаете.

Вместо придающие элементы общий класс и смотреть их с 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.

Сказав, что, я думаю, что я, вероятно, немного изменить HTML, чтобы сделать это намного проще, но положить элемент обертки вокруг каждой триады userInput, submitter и output элементы:

// 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>

Answer 4

Таким образом, вы «не можете» иметь несколько элементов с одним и тем же идентификатором. Помимо изменения идентификатора обоих входов и кнопок, вы также хотите изменить идентификатор выходных разделителей.