Определить на какой по счету элемент был произведен клик

Надо понять на какой элемент по счету в массиве DOM элементов, полученных getElementsByName был произведен клик. То есть я беру и получаю все элементы dot-selector

const dotSelector = document.getElementsByName('dot-selector');

на выходе получаю массив

NodeList(4) [i#dot-1.far.fa-dot-circle, i#dot-2.far.fa-dot-circle, i#dot-3.far.fa-dot-circle, i#dot-4.far.fa-dot-circle]
0: i#dot-1.far.fa-dot-circle
1: i#dot-2.far.fa-dot-circle
2: i#dot-3.far.fa-dot-circle
3: i#dot-4.far.fa-dot-circle
length: 4

и надо определить на какой именно по счету элемент из этих был произведен клик.

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Alexander Lonberg

document.body.addEventListener('click', ({target}) => {
  console.log(
    [...document.querySelectorAll('span')]
    .findIndex((e) => e === target)
  )
})
span {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 1px solid red;
  font-size: 20px;
  cursor: pointer;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>

→ Ссылка