Изменение стилей элементов с помощью getElementsByClassName

getElementsByClassName позволяет выбирать несколько элементов с одинаковым именем класса. В приведенном примере код предназначен для изменения цвета фона всех элементов div с определенным именем класса, когда событие происходит за пределами этих элементов div.

Диагностика проблем

В предоставленном коде есть несколько проблем:

1. Неправильное использование getElementsByClassName: Синтаксис getElementsByClassName() возвращает коллекцию совпадающих элементов, а не отдельный элемент DOM. Чтобы изменить стиль каждого элемента, вам необходимо пройтись по коллекции.
2. Неверный синтаксис HTML: Идентификатор элемента не может содержать пробелы, что делает идентификаторы переключателей цветов A и B недействительными. .

Решение

Чтобы решить эти проблемы, вы можете использовать следующее исправленное код:

window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i 
В этом исправленном коде:
Мы просматриваем коллекции, возвращаемые getElementsByClassName, чтобы изменить стиль всех соответствующих элементов.
Мы используем правильные идентификаторы без пробелов для идентификации триггерных элементов.
Мы определяем функцию изменения цвета, чтобы применить желаемое изменение цвета к elements.
Дополнительные примечания
Для оптимальной производительности рассмотрите возможность кэширования коллекции элементов, а не повторного запроса к ней каждый раз. Кроме того, использование классов CSS и прослушивателей событий для изменения стиля более эффективно, чем встроенные атрибуты.