Подскажите пожалуйста, как с помощью 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);
}