如何循环浏览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

  };

有没有更好的方法来实现这一点。

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