getElementByClassName. Как задать событие onclick

Question

Есть выпадающий список со своим классом (использую Bootstrap 5, если это чем-то поможет). При нажатии на элемент его фон стаёт синим, а хотелось бы серый. Используя метод getElementByClassName я не могу задать ни onclick элементу, ни addEventListener с click. Перебор в цикле так же не работает. Помогите, подскажите, что я делаю не так. Вот код :

var items = document.getElementsByClassName('dropdown-item');
for (var i = 0; i < items.length; i++) {
    document.getElementsByClassName('dropdown-item')[i].addEventListener('click', function(){})
}

Функция изменения цвета ещё не написана так как тоже не совсем понятно, как получить доступ до нажатого элемента.

Answer 1

заменить

document.getElementsByClassName('dropdown-item')[i]

на

items[i]

а

var i = 0;

лучше заменить на

let i = 0;

и еще для выпадашки надо использовать событие change, а не click

Answer 2

Отлично все работает при стандартной разметке bootstrap, но как уже сказали, это пустая трата ресурсов браузера на выборку элементов с помощью функции getElementsByClassName() в html-документе. Поэтому стоит использовать второй вариант, обращаться к items[i].

v1

var items = document.getElementsByClassName('dropdown-item');
for (var i = 0; i < items.length; i++) {
  document.getElementsByClassName('dropdown-item')[i].addEventListener('click', function(e) {
    console.log(this.getAttribute('class'));
    //background-color нажатого элемента
    this.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    e.preventDefault();
  })
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item dropdown-item-1" href="#">Действие</a></li>
      <li><a class="dropdown-item dropdown-item-2" href="#">Другое действие</a></li>
      <li><a class="dropdown-item dropdown-item-3" href="#">Что-то еще здесь</a></li>
    </ul>
  </div>

v2

var items = document.getElementsByClassName('dropdown-item');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function(e) {
    console.log(this.getAttribute('class'));
    //background-color нажатого элемента
    this.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    e.preventDefault();
  })
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</head>

<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Кнопка выпадающего списка
  </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item dropdown-item-1" href="#">Действие</a></li>
      <li><a class="dropdown-item dropdown-item-2" href="#">Другое действие</a></li>
      <li><a class="dropdown-item dropdown-item-3" href="#">Что-то еще здесь</a></li>
    </ul>
  </div>

БЛОГ НА HUSL

getElementByClassName. Как задать событие onclick

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