Как перебрать кнопки в JavaScript?

У меня есть несколько кнопок на моем веб-сайте, и я хочу назначить разные задачи для каждой кнопки, в настоящее время я обращаюсь к ним по одной, используя getElementByID и так как у меня так много кнопок, я закончил тем, что написал бесконечные строки кодов просто для ссылки на кнопки, имея некоторое знание java, я понимаю, что то, что я сделал, может быть достигнуто с помощью меньшего количества кода, используемого для цикла, но я не совсем уверен, как делать это, любая помощь приветствуется.

В настоящее время я так называю свои кнопки:

    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

  };

Есть ли лучший способ добиться этого, пожалуйста.

6 ответов

Инициируйте счетчик и продолжайте проверять, пока не получите кнопку, которой не существует

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
   });
}
$('button').on('click',function(){
    alert($(this).attr('id'));
});

Теперь внутри события клика используйте $(this) JQuery объект

Пожалуйста, попробуйте это (добавлена ​​функция doSomething(item) объяснить реальное использование):

    function doSomething(item) {
        switch (item.id) {
            case 'button3menu': 
                // Make this button do something, only it. For example: 
                alert('Hey, you are pressing me!');
                break;
            default:
                // Make all the button's whose id is not contemplated as a case value 
                alert('My id is: ' + item.id);
                break;
    }}

        <script>
        (function()
        {
            var num = 4;
            for (var i = 0; i < num; i++)
            {
                var elem = document.createElement('button');
                elem.id = "button" + i + "menu";
                elem.innerHTML = "button" + i;
                document.body.appendChild(elem)

                elem.addEventListener('click', function(){doSomething(this)});
            }
        })()
        </script>

Предполагая, что у вас есть родительский элемент для всех или некоторых ваших кнопок:

<div id="parent">
<button id="button1menu">button</button>
<button id="button2menu">button</button>
<button id="button3menu">button</button>
<button id="button4menu">button</button>
<button id="button5menu">button</button>
<button id="button6menu">button</button>
</div>

Для обработки всех из них достаточно одного прослушивателя событий:

document.getElementById("parent").addEventListener("click", function(e) {
     // e.target is the clicked element
    //check if button1menu has been clicked
    if(e.target && e.target.id == "button1menu") {
        alert(e.target.id + " was clicked");
    }

    //check if button2menu has been clicked
    if(e.target && e.target.id == "button2menu") {
        alert(e.target.id + " was clicked");
    }

  //etc
 });

Вы можете больше экспериментировать в этой скрипке

Это называется делегированием событий, и это хорошо для вас.

Решение JQuery

$("button[id^='button']").on('click', function() {
  console.log($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1menu">button</button>
<button id="button2menu">button</button>
<button id="button3menu">button</button>
<button id="button4menu">button</button>
<button id="button5menu">button</button>
<button id="button6menu">button</button>

Если кто-то все еще ищет решение - создайте коллекцию с помощью document.querySelectorAll, а затем через цикл назначьте индекс для каждой кнопки. После этого вы можете закладывать в каждый корпус тот функционал, который вам нужен. Это работает для простых задач.

Например, ниже у меня есть три кнопки, при нажатии на любую из них цвет фона изменится:

HTML:

      <div id="page-container">
  <button type="button" class="btn btn-red">red</button>
  <button type="button" class="btn btn-green">green</button>
  <button type="button" class="btn btn-blue">blue</button>
  <script src="buttonCollection.js"></script>
</div>

JS:

      let pageContainer = document.getElementById('page-container')
let buttons = document.querySelectorAll('.btn')
let index = undefined;

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function () {
    index = i;
    switch (index) {
        case 0:
          pageContainer.style.backgroundColor = "red"; 
          break;
      
        case 1:
          pageContainer.style.backgroundColor = "green";
          break;
      
        case 2:
          pageContainer.style.backgroundColor = "blue";
          break;
      
        default:
          pageContainer.style.backgroundColor = "bisque";
          break;
      }
    })
}
Другие вопросы по тегам