如何循环浏览javascript中的按钮？

Question

我的网站上有许多不同的按钮，我想为每个按钮分配不同的任务，目前我正在使用 getElementByID 一个一个地引用它们，因为我有太多的按钮，我最终写了无数行代码只是为了引用按钮，对 java 有一些了解我知道我所做的可以用更少的代码使用 for 循环来实现，但我不太确定如何去做，欢迎任何帮助。

目前这是我引用我的按钮的方式：

     var Button1Menu = document.getElementById("button1menu");
    var Button2Menu = document.getElementById("button2menu");
    var Button3Menu = document.getElementById("button3menu");
    var Button4Menu = document.getElementById("button4menu");
    var Button5Menu = document.getElementById("button5menu");
    var Button6Menu = document.getElementById("button6menu");
    var Button7Menu = document.getElementById("button7menu");
    var Button8Menu = document.getElementById("button8menu");
    var Button9Menu = document.getElementById("button9menu");
    .....
    .....
    .....
    var Button43Menu = document.getElementById("button43menu");

然后我为每个分配点击监听器：

 Button1Menu.onclick = function() {

     //doing something

  };

请问有没有更好的方法来实现这一目标。

原文由 Henry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

启动一个计数器并继续检查直到你得到一个不存在的按钮

var counter = 1;
var button  = document.getElementById( "button" + counter + "menu" );

while ( button )
{
   button.addEventListener("click", function(){
      //do something here
   });

   button  = document.getElementById( "button" + ( ++counter ) + "menu" );
}

如果所有的按钮都需要分配一个点击事件那么

var buttons = document.querySelectorAll( "button[id^='button'][id$='menu']" );
for ( var counter = 0; counter < buttons.length; counter++)
{
    buttons[counter].addEventListener("click", function(){
      //do something here
   });
}

原文由 gurvinder372 发布，翻译遵循 CC BY-SA 3.0 许可协议