JavaScript, Recurring loop

Question

I have an issue... how can I get these two text fields to display whats put into them, separately?

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

My issue is that one of the boxes dont work when a value is inputted. How do I fix this?

score 1 · Answer 1 · edited May 23 '17 at 10:29

ids cannot be repeated on a page, you end up with an invalid document and one that doesn't behave the way you expect it to.

Instead, give the elements a common class and look them up with document.querySelectorAll, then hook the event on both of them, see comments:

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

See the "array-like" part of this answer to understand that odd Array.prototype.forEach.call call.

Having said that, I think I would probably change the HTML slightly to make this a lot easier, but putting a wrapper element around each triad of the userInput, submitter, and output elements:

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

score 0 · Answer 2 · answered Jun 08 '16 at 11:34

0

Two inputs have the same id, you have to change one of them and add listener to the other

answered Jun 08 '16 at 11:34

Rubén Amaro

64
6

score 0 · Answer 3 · answered Jun 08 '16 at 11:37

0

You should have two different ids for both text fields and buttons and add click events to them.

answered Jun 08 '16 at 11:37

riteshmeher

854
8
16

score -1 · Answer 4 · answered Jun 08 '16 at 11:40

-1

In summary, you "cannot" have multiple elements with the same id. Apart from changing the id's of both the inputs and buttons you also want to change the id of the output divs.

answered Jun 08 '16 at 11:40

Fabio

791
1
7
27

JavaScript, Recurring loop

4 Answers4