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

不能在页面上重复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调用。

话虽如此，我想我可能会稍微修改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 2

两个输入具有相同的id，您必须更改其中一个并将侦听器添加到另一个输入。

Answer 3

对于文本字段和按钮，您应该有两个不同的ids，并将单击事件添加到它们中。