Как получить id с помощью addEventListner и getElementsByClassName?

Подскажите пожалуйста, как с помощью addEventListner и getElementsByClassName можно выбирать id элемента, при клике на этот элемент, был бы рад разным вариантам)

Можно сделать так через forEach:


var dots = document.querySelectorAll('.slider-nav__dot')

dots.
forEach(function(dot, index){
dot.
addEventListener('click', () => console.log(index))
})

Разметка для примера:

<span class="slider-nav__dot">
<span class="slider-nav__dot">
<span class="slider-nav__dot">

Стили что бы было видно когда идет нажатие, нужно теперь просто открыть консоль и посмотреть что там вывело, при нажатии на блоки будет выводится их индекс (айди элемента).

.slider-nav__dot:before {
content: 'span';
}
.
slider-nav__dot:active {
background: orange;
}

Есть еще такой вариант используя цикл for:

var dots = document.getElementsByClassName('slider-nav__dot');

for
(var i = 0; i < dots.length; i ) {
(
function (index) {
dots[index].
addEventListener("click", function () {
console.
log(index);
})
})(i)
;
}