Modification des styles d'éléments à l'aide de getElementsByClassName

getElementsByClassName vous permet de sélectionner plusieurs éléments avec le même nom de classe. Dans l'exemple donné, le code vise à changer la couleur d'arrière-plan de tous les divs avec un nom de classe spécifique lorsqu'un événement se produit en dehors de ces divs.

Diagnostic du problème

Le le code fourni présente quelques problèmes :

1. Utilisation incorrecte de getElementsByClassName : La syntaxe getElementsByClassName() renvoie une collection d'éléments correspondants, pas un seul élément DOM. Pour modifier le style de chaque élément, vous devez parcourir la collection.
2. Syntaxe HTML invalide : L'ID d'un élément ne peut pas contenir d'espaces, ce qui rend les ID de votre colorswitcher A et colorswitcher B invalides. .

Solution

Pour résoudre ces problèmes, vous pouvez utiliser le code corrigé suivant :

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 
Dans ce code corrigé :
Nous parcourons les collections renvoyées par getElementsByClassName pour modifier le style de tous les éléments correspondants.
Nous utilisons des identifiants corrects sans espaces pour identifier les éléments déclencheurs.
Nous définissons la fonction changeColor pour appliquer le changement de couleur souhaité aux éléments.
Notes supplémentaires
 Pour des performances optimales, envisagez de mettre en cache la collection d’éléments au lieu de la réinterroger à chaque fois. De plus, l'utilisation de classes CSS et d'écouteurs d'événements pour les changements de style est plus efficace que les attributs en ligne.