Как понять, по какому элементу выпадающего списка кликнул пользователь? Как вывести id или что-то еще, что бы можно было задать действие, когда пользователь выбирает тот или иной элемент?
Я написал функцию, но при клике на элемент выводится Undefined
<div class="dropdown">
<div class="select">
<span class="selected">Выбрать звук</span>
<div class="caret"></div>
</div>
<ul class="menu">
<li>Sound 1</li>
<li>Sound 2</li>
<li>Sound 3</li>
<li class="active">Sound 4</li>
<li>Sound 5</li>
</ul>
</div>
// Клик по кнопке. Открыть/закрыть
dropdowns.forEach(dropdown => {
const select = dropdown.querySelector('.select');
const caret = dropdown.querySelector('.caret');
const menu = dropdown.querySelector('.menu');
const options = dropdown.querySelectorAll('.menu li');
const selected = dropdown.querySelector('.selected');
select.addEventListener('click', () => {
select.classList.toggle('select-clicked');
caret.classList.toggle('caret-rotate');
menu.classList.toggle('menu-open');
})
// Выбор элемента списка. Запомнить выбранное значение. Закрыть дропдаун
options.forEach(option => {
option.addEventListener('click', (event) => {
event.stopPropagation();
selected.innerText = option.innerText;
select.classList.remove('select-clicked');
caret.classList.remove('caret-rotate');
menu.classList.remove('menu-open');
options.forEach(option => {
option.classList.remove('active');
});
option.classList.add('active');
})
})
});
// Вот здесь не знаю как написать, что бы выводился элемент по которому кликнули. Сейчас выводится Undefined
optionsArray.forEach(function (item) {
item.addEventListener('click', () => {
console.log(item.eventTarget);
})
})
