-1

I have 4 input boxes (streamInput1-4) and 4 buttons (button1-4) and I'm trying to use a loop to assign each button to its corresponding input box, but for some reason the buttons won't click when I use a concatenated element id with the .click() method.

This code works:

document.getElementById("streamInput1")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode == 13) {
        document.getElementById("button1").click();
    }
});

But this code does not:

var numOfPlayers = 4;
var ii;

for ( ii = 1 ; ii <= numOfPlayers ; ii++ ) {
  document.getElementById("streamInput"+ii)
      .addEventListener("keyup", function(event) {
      event.preventDefault();
      if (event.keyCode == 13) {
          document.getElementById("button"+ii).click();
      }
  });
}

I found that using "button1" in place of "button"+ii will work but "streamInput1" in place of "streamInput"+ii won't work. So only the concatenated element id with .click() isn't working properly.

Am I doing something wrong?

stuffedtiger
  • 1
  • 4
  • In first code snippet you have added event listener on **chatInput** . In second code snippet that does not work has event listener on **streamInput** . Make sure you are adding event listener on proper element. – Kandarp Kalavadia Oct 15 '16 at 13:53
  • I am indeed using the correct elements. Sorry for the confusion, I will edit the post. In the complete document, I use the addEventListener on 5 elements, chatInput, streamInput1 streamInput2, streamInput3, and streamInput4. I would just like to shorten the code by using a loop. Thank you for your reply @KandarpKalavadia – stuffedtiger Oct 15 '16 at 14:16
  • @JoshPratt I have modified your code below. Basically, when the `keyup` event occurs, `ii` has a different value as the final `for` loop iteration changed its value out of its bounds with `ii++`. Hence `ii` should be persisted somehow or in the same input element to reuse the same at the time of the event occurs. – Aruna Oct 15 '16 at 14:41

1 Answers1

0

Please have a look at the modified code:

var numOfPlayers = 4;
var ii;


for ( ii = 1 ; ii <= numOfPlayers ; ii++ ) {
  var elm = document.getElementById("streamInput"+ii);
  elm.index = ii;
  elm.addEventListener("keyup", function(event) {
     var index = event.target.index;
      event.preventDefault();
      if (event.keyCode == 13) {
          document.getElementById("button"+index).click();
      }
  });
}



function onClick(e) {
  console.log('button clicked:' + e.target.id);
}
<div>
  <input type="text" id="streamInput1" /> <input type="button" value="Update" id="button1" onclick=onClick(event) />
</div>
<br/>
<div>
  <input type="text" id="streamInput2" /> <input type="button" value="Update" id="button2" onclick=onClick(event) />
</div>
<br/>
<div>
  <input type="text" id="streamInput3" /> <input type="button" value="Update" id="button3" onclick=onClick(event) />
</div>
<br/>
<div>
  <input type="text" id="streamInput4" /> <input type="button" value="Update" id="button4" onclick=onClick(event) />
</div>
Aruna
  • 448
  • 3
  • 12