Как использовать идентификатор конкатенированного элемента с .click ()? [Дубликат]

На этот вопрос уже есть ответ:

У меня есть 4 поля ввода (streamInput1-4) и 4 кнопки (button1-4), и я пытаюсь использовать цикл для назначения каждой кнопки в соответствующее поле ввода, но по какой-то причине кнопки не будут нажимать, когда я использую идентификатор конкатенированного элемента с методом .click ().

Этот код работает:

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

Но этот код не делает:

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

Я обнаружил, что использование «button1» вместо кнопки «+» будет работать, но «streamInput1» вместо «streamInput» + ii не будет работать. Таким образом, только идентификатор конкатенированного элемента с .click () работает неправильно.

Я делаю что-то неправильно?

javascript,jquery,html,html,

-1

Ответов: 1

0 принят

Пожалуйста, ознакомьтесь с измененным кодом:

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>

JavaScript, JQuery, HTML, HTML,
Похожие вопросы
Яндекс.Метрика