Как получить индекс элемента, который вызвал функцию?

Question

[Pavel_Proca]

Есть неограниченное количество элементов в HTML. К примеру, кнопок. Каждая из них вызывает одну и ту же функцию.

<button onClick="somefunc(this)">Button 1</button>
<button onClick="somefunc(this)">Button 2</button>
<button onClick="somefunc(this)">Button 3</button>
<button onClick="somefunc(this)">Button N</button>

Как сделать так, что бы функция вернула порядковый номер вызывающего элемента из списка всех остальных элементов?
То есть, мне нужно узнать его номер, что бы я мог обратиться к нему с помощью document.getElementsByTagName('button')[Тут по сути должен быть его номер, который я и хочу узнать]

Comments

[Рамиль]

Как сделать так, что бы функция вернула порядковый номер вызывающего элемента из списка всех остальных элементов?

А куда планируете возвращать?

[Pavel_Proca]

Рамиль: Да хоть в тот же alert пусть пишет. А так, нужно это попросту записать в div.

Answer 1

[Hyubert]

Не нужно так
лучше делегировать собитие

<div id="parent">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button N</button>
</div>

document.getElementById('parent').addEventListener('click', function (e) {
  console.log(e.target);
})

Comments

[Pavel_Proca]

А если таких контейнеров больше? Не писать же вручную parent1, parent2, и т.д.

[Hyubert]

Pavel_Proca: тогда используйте class вместо id

[Pavel_Proca]

Спасибо, попробую.

[Hyubert]

Pavel_Proca: Если что спрашивайте

[Рамиль]

Присвой тогда для элементов button классы, и привязывай события так для примера:

document.querySelectorAll('.some-button').addEventListener('click', function (e) {
  console.log(e.target);
});

[Pavel_Proca]

Hyubert: А как узнать из какого по счёту контейнера была вызвана эта функция?

[Hyubert]

Pavel_Proca: если не секрет, зачем Вам номер?

[Pavel_Proca]

Hyubert: Да уже всё, разобрался. Ещё раз спасибо за помощь.

Answer 2

[Кирилл Бабак]

если эти элементы обернуты в какой-то элемент то можешь через index в jQuery сделать

Answer 3

[emp1re]

Если без всплытия то вот такой кастыльчик можно сделать -

<button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button N</button>

var button = document.querySelectorAll('button');
for(var i=0; i < button.length; i++){
		lisener(i);
}
function lisener(i){
	   button[i].addEventListener('click', () => {
	    console.log(i);
  })
}

<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button N</button>
  </div>



var div = document.querySelector('div');
div.addEventListener('click', (e) => {
     console.log(e.target)
  })

Answer 4

[Сергей]

somefunc() {
   var num_of_button =  $(this).index();
};