在进行 for 循环时如何单击按钮？答案

【问题标题】：How can I click in buttons while doing for loop?在进行 for 循环时如何单击按钮？
【发布时间】：2018-10-15 13:53:21
【问题描述】：

我有具有相同类名的按钮，我想在循环时单击它们。我写了类似的东西，但它不起作用。它只点击 1 个按钮

let btns = document.getElementsByClassName('key');

for (let i = 0; i < btns.length; i++) {
    btns[i].click();
};

【问题讨论】：

您能否将您的完整代码（包括 html）添加到您的问题中？
您的代码看起来正确，但请确保脚本在 DOM 加载后运行。

标签： javascript loops for-loop

【解决方案1】：

看到这个working example。这里还引用了EventTarget.dispatchEvent()

window.onload = ()=>{
  // get all our buttons
  let buttons = document.getElementsByClassName('button-clickers');
  // the event we plan on invoking
  let clickEvent = new Event('click');
  // assign an event handler for each button
  for(let i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', function(){
      console.log(`hi, you have triggered ${this.value}'s click event.`);
    });
  }
  // trigger the click event for each button
  for(let i = 0; i < buttons.length; i++){
    buttons[i].dispatchEvent(clickEvent);
    // buttons[i].click(); // This works too.
  }
}

<input type="button" class="button-clickers" value="Bnt1">
<input type="button" class="button-clickers" value="Bnt2">
<input type="button" class="button-clickers" value="Bnt3">
<input type="button" class="button-clickers" value="Bnt4">
<input type="button" class="button-clickers" value="Bnt5">
<input type="button" class="button-clickers" value="Bnt6">
<input type="button" class="button-clickers" value="Bnt7">

您的问题可能与您获取所有按钮或将事件处理程序分配给它们的方式有关。如果它们是动态创建的，您确定在按钮创建后分配了事件处理程序吗？ :)

【讨论】：