Various buttons with the same class name get the clicked one

Question

I am trying to get the index of the clicked element. There are several buttons with the same class name, and I am getting all the elements with:

var button = document.getElementsByClassName("unLockUser-button");

Result of getting all the elements with the same class name:

Now I need to get the index of the selected element, for that I am trying to iterate through the collection, but it is not working:

for (var i = 0; i < button.length; i++) {
    button[i].addEventListener("click", () => {
        alert(i);
    })
}

But as a result, I am getting all the time the same number it does not matter which button that has the same class name I click.

if you add the event as parameter to the eventlistener, you can use `event.target` - that is more robust than trying to get the index... `button[i].addEventListener("click", (e) => {console.log(e.target)})` — JoSSte, Aug 03 '22 at 19:53

score 0 · Answer 1 · answered Aug 03 '22 at 19:56

You need to use let instead of var as i will be the last button whose have this class, but let will closure the i value on each iteration.

for (let i = 0; i < button.length; i++) {
    button[i].addEventListener("click", () => {
        alert(i);
    })
}

JoSSte · Answer 2 · 2022-08-03T20:31:28.753

If you add an event parameter to the eventlistener, you can use event.target - that is more robust than trying to get the index... besides when your anonumous function is called, the i is in the scope of that function, and not the value of the i in the for loop wherein you are attaching the event listeners.

Also, I would recommend changing the variable name to buttons (plural) since you get a list (elements in the function name - as opposted to document.getElementById() which is singular)

let buttons = document.getElementsByClassName("unLockUser-button");

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", (e) => {
        console.debug(e.target);
        //i in here is not the same as i in the for loop
    })
}

score 0 · Answer 3 · answered Aug 03 '22 at 19:59

You can fix it with the code below:

for(var i = 0; i < button.length; i++) {
    button[i].addEventListener("click", (e) => {
        alert(button.indexOf(e.target));
    });
}

Or with this:

for(var i = 0; i < button.length; i++) {
    button[i].addEventListener("click", () => {
        showAlert(this);
    });
}
function showAlert(butt) {
    alert(button.indexOf(butt));
}

It shows -1 if it's not a button in the same class.

score 0 · Accepted Answer · answered Aug 03 '22 at 20:00

let buttons = document.querySelectorAll(".unLockUser-button"); // quaryselectorall will return and nodelist of button with classnaem .unLockUser-button
buttons.forEach((btn, index) => {// index will be current button index
  btn.addEventListener("click", function(e) {
    console.log(e.target, index);;
  });
})

<button class="unLockUser-button">button</button><button class="unLockUser-button">button</button><button class="unLockUser-button">button</button><button class="unLockUser-button">button</button><button class="unLockUser-button">button</button>
<button class="unLockUser-button">button</button>

Various buttons with the same class name get the clicked one

4 Answers4