Question

我有4个输入框（streamInput1-4）和4个按钮（button1-4），我正在尝试使用循环将每个按钮分配到相应的输入框，但由于某种原因，按钮不会单击当我使用带有.click（）方法的连接元素id时。

此代码有效：

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”代替“button”+ ii 将工作但“streamInput1”代替“streamInput”+ ii 不会工作。因此，只有带有.click（）的连接元素id才能正常工作。

我做错了吗？

Answer 1

请查看修改后的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用带有.click（）的连接元素id？

1 个答案: