CODEWITHSUNDEEP
javascript
amaugo somto
amaugo somto

Reputation: 462

How to add one event listener for all buttons

How do I add an event listener to multiple buttons and get the value of each one depending on the one clicked. Eg: 

<button id='but1'>
Button1
</button>
<button id='but2'>
Button2
</button>
<button id='but3'>
Button3
</button>
<button id='but4'>
Button4
</button>

So that on javascript, I wouldn't have to reference each button like:

Const but1 = document.getElementById('but1'); 
but1.addEventListener('click');

Upvotes: 26

Views: 65831

Answers (4)

Adam Azad
Adam Azad

Reputation: 11297

If the buttons do not have a common class, you can use:

button[id^=but]

To select any button with id starting with the phrase but, so it translates to but*, where * is a wildcard match.

const btns = document.querySelectorAll('button[id^=but]')

btns.forEach(btn => {

   btn.addEventListener('click', event => {
        console.log( event.target.id );
   });

});
<button id='but1'>Button1</button>
<button id='but2'>Button2</button>
<button id='but3'>Button3</button>
<button id='but4'>Button4</button>

Upvotes: 16

Scott Strauss
Scott Strauss

Reputation: 21

Like Lucas's answer, this version will use classes instead of ID to select each button, and it will use a basic for loop.

<button class="btn">
    Button1
</button>
<button class="btn">
    Button2
</button>
<button class="btn">
    Button3
</button>
<button class="btn">
    Button4
</button>

The JS

var buttons = document.querySelectorAll(".btn").length;

for (var i = 0; i < buttons ; i++) {
    document.querySelectorAll(".btn")[i].addEventListener("click", function() {
        alert("Button Clicked");
    });
}

Upvotes: 2

Aliaksandr Sushkevich
Aliaksandr Sushkevich

Reputation: 12384

You don't really need to add listeners to all the buttons. There is such thing in JS as Bubbling and capturing so you can wrap all your buttons with a div and catch all the events there. But make sure you check that the click was on a button and not on the div.

const wrapper = document.getElementById('wrapper');

wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }

  console.dir(event.target.id);
})
div {
  padding: 20px;
  border: 1px solid black;
}
<div id='wrapper'>
  <button id='but1'>
  Button1
  </button>
  <button id='but2'>
  Button2
  </button>
  <button id='but3'>
  Button3
  </button>
  <button id='but4'>
  Button4
  </button>
</div>

Upvotes: 40

Lucas David Ferrero
Lucas David Ferrero

Reputation: 1912

In this case, you could use a class instead of id to grab every button.

<button class="btn">
Button1
</button>
<button class="btn">
Button2
</button>
<button class="btn">
Button3
</button>
<button class="btn">
Button4
</button>

And then in JS:

const buttons = document.querySelectorAll('.btn')
buttons.forEach(function(currentBtn){
  currentBtn.addEventListener('click', handleEvent)
})

You just loop over the buttons constant which hold a NodeList with all the buttons that were found. read about document.querySelectorAll

Upvotes: 8

Related Questions