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查找它们，然后将事件挂钩到两个，请参阅注释：

＆＃13;

// 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)
    );
  }
}

＆＃13;

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

＆＃13;

参见＆＃34;类似阵列＆＃34; this answer的一部分，以了解奇怪的Array.prototype.forEach.call电话。

话虽如此，我想我可能会略微更改HTML以使这更容易，但在userInput，submitter和{{1}的每个三元组周围放置一个包装元素元素：

＆＃13;

output

＆＃13;

// 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)
    );
  }
}

＆＃13;

Answer 2

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

Answer 3

对于文本字段和按钮，您应该有两个不同的ID，并为它们添加点击事件。

Answer 4

总之，您“不能”拥有多个具有相同ID的元素。除了更改输入和按钮的id之外，您还需要更改输出div的id。

JavaScript，重复循环

4 个答案: