onBall3Click1函数逻辑故障：灯泡式切换功能失效

你的onBall3Click1函数无法切换背景色的核心原因是：element.style.backgroundColor只能读取元素的内联样式（即写在style属性里的样式），而初始的灰色是通过CSS类.ball3设置的，所以第一次点击时ball3.style.backgroundColor为空，不会触发背景色切换逻辑。

修复方案一：基于文本状态切换背景色 #

既然文本已经能正确在ON/OFF之间切换，直接根据文本内容设置背景色，逻辑更直接：

function onBall3Click1() {
  var ball3 = document.querySelector('.ball3');
  if (ball3.innerText === 'OFF') {
    ball3.innerText = 'ON';
    ball3.style.backgroundColor = 'yellow';
  } else {
    ball3.innerText = 'OFF';
    ball3.style.backgroundColor = 'gray';
  }
}

修复方案二：通过切换CSS类实现（更推荐） #

将样式逻辑放在CSS中，代码更清晰，符合样式与行为分离的原则：

1. 在CSS中新增激活状态类：

.ball3.active {
  background-color: yellow;
}

2. 简化JavaScript函数：

function onBall3Click1() {
  var ball3 = document.querySelector('.ball3');
  // 切换文本
  ball3.innerText = ball3.innerText === 'OFF' ? 'ON' : 'OFF';
  // 切换样式类
  ball3.classList.toggle('active');
}

额外注意点 #

• 颜色名保持大小写一致（比如CSS用yellow，代码里不要写Yellow），避免匹配问题。
• 优先使用===严格相等判断，避免类型转换带来的意外错误。

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