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 不能在页面上重复，您最终会得到一个无效文档，并且其行为不会按照您期望的方式进行。

相反，为元素提供一个公共(public)类，并使用 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>