getElementsByClassName を使用した要素スタイルの変更

getElementsByClassName を使用すると、同じクラス名を持つ複数の要素を選択できます。この例では、コードの目的は、特定のクラス名を持つすべての div の外側でイベントが発生したときに、その div の背景色を変更することです。

問題診断

提供されたコードにはいくつかの問題があります:

1. getElementsByClassName: の誤った使用法 getElementsByClassName() 構文は、単一の DOM 要素ではなく、一致する要素のコレクションを返します。各要素のスタイルを変更するには、コレクションをループする必要があります。
2. 無効な HTML 構文: 要素の ID にはスペースを含めることはできません。そのため、カラースイッチャー A とカラースイッチャー B の ID が無効になります。 .

解決策

これらの問題を解決するには、次の修正されたコードを使用できます:

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 によって返されたコレクションをループして、一致するすべての要素のスタイルを変更します。
スペースのない正しい ID を使用します。トリガーとなる要素を特定します。
要素に目的の色の変更を適用するために、changeColor 関数を定義します。
補足
最適なパフォーマンスを得るには、要素のコレクションを毎回再クエリするのではなくキャッシュすることを検討してください。さらに、スタイル変更には CSS クラスとイベント リスナーを使用する方が、インライン属性を使用するよりも効率的です。