如何用循环与if语句实现点击切换Div背景色（绿橙往复）及代码排查

问题描述 #

我希望实现点击每个特定div时，其背景色在绿色与橙色之间来回切换，但当前代码无法达成该效果，请求帮忙排查问题。

原代码 #

HTML #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Working With JavaScript Functions</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id='testA' style="background-color: green;" class="box"></div>
    <div id='testB' style="background-color: green;"  class="box"></div>
    <div id='testC' style="background-color: green;"  class="box"></div>
    <div id='testD' style="background-color: green;"  class="box"></div>
    <div id='testE' style="background-color: green;"  class="box"></div>
    <div id='testF' style="background-color: green;"  class="box"></div>
    <script src="index.js"></script>
  </body>
</html>

CSS #

.box {
    width: 75px;
    height: 75px;
    margin: 1rem;
    display: inline-block;
}

JavaScript #

let greenBox = document.getElementsByClassName('box');

function boxClicked(event) {
    
  for (let i = 0; i <=greenBox.length; i++){

    if (greenBox[i].style.backgroundColor === 'green') {
      greenBox[i].style.backgroundColor = 'orange';

    } else {
      greenBox[i].style.backgroundColor = 'green';
    }
  }
}

greenBox.addEventListener('click', boxClicked);

错误分析 #

1. 事件绑定错误：getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM元素，无法直接调用addEventListener，必须遍历每个元素单独绑定事件。
2. 循环越界：循环条件i <= greenBox.length会导致访问不存在的索引greenBox[greenBox.length]，引发报错，正确条件应为i < greenBox.length。
3. 逻辑错误：点击事件内遍历所有box，会导致点击任意一个div时所有box一起切换颜色，不符合“点击特定div只切换自身”的需求。
4. 颜色值判断不可靠：element.style.backgroundColor返回的颜色格式可能是RGB字符串如rgb(0, 128, 0)而非字面量green，直接判断会失效。

修正方案（推荐使用CSS类切换） #

修改后的HTML #

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Working With JavaScript Functions</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id='testA' class="box green"></div>
    <div id='testB' class="box green"></div>
    <div id='testC' class="box green"></div>
    <div id='testD' class="box green"></div>
    <div id='testE' class="box green"></div>
    <div id='testF' class="box green"></div>
    <script src="index.js"></script>
  </body>
</html>

修改后的CSS #

.box {
    width: 75px;
    height: 75px;
    margin: 1rem;
    display: inline-block;
}
.green {
    background-color: green;
}
.orange {
    background-color: orange;
}

修改后的JavaScript #

const boxes = document.getElementsByClassName('box');

// 遍历每个box，绑定点击事件
for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener('click', function(event) {
    // 切换当前点击元素的CSS类
    const targetBox = event.target;
    targetBox.classList.toggle('green');
    targetBox.classList.toggle('orange');
  });
}

方案说明 #

• 用CSS类管理背景色，避免直接操作style属性，样式逻辑更清晰，也规避了颜色值格式不一致的问题。
• 遍历每个box单独绑定点击事件，确保每个元素都能响应点击。
• 通过event.target获取当前被点击的元素，只切换该元素的样式，符合需求。
• 循环条件修正为i < boxes.length，避免索引越界报错。

内容的提问来源于stack exchange，提问作者Darko Zlatarek