报错：Cannot set 'backgroundColor of undefined' 代码问题排查求助

嘿，这问题我熟！你遇到的核心问题是 document.getElementsByClassName() 返回的不是单个元素，而是一个类数组的 HTMLCollection 对象，直接给它加 .style 肯定会报错——因为集合本身没有这个属性呀！

错误原因拆解 #

你写的这段代码：

document.getElementsByClassName('dot').style.backgroundColor = "black";

getElementsByClassName('dot') 会把页面上所有带 dot 类的元素都捞出来，放到一个集合里。你得从这个集合里拿到具体的元素，才能修改它的样式。

解决方案分两种情况： #

1. 要修改所有 dot 元素的背景色

用循环遍历整个集合，给每个元素单独设置样式：

function process() {
  if (dv1 === 1 && dv2 === 1 && dv3 === 1) {
    turns = 0;
    // 获取所有dot元素集合
    const dots = document.getElementsByClassName('dot');
    // 循环遍历每个元素
    for (let i = 0; i < dots.length; i++) {
      dots[i].style.backgroundColor = "black";
    }
  }
}

2. 要修改某一个 dot 元素的背景色

如果是指定某一个（比如id为dot_03的元素），其实直接用getElementById更高效；如果非要通过类名+索引选，也可以这么写：

function process() {
  if (dv1 === 1 && dv2 === 1 && dv3 === 1) {
    turns = 0;
    // 拿到第3个dot元素（索引从0开始，所以是[2]）
    const targetDot = document.getElementsByClassName('dot')[2];
    // 或者通过id直接获取
    // const targetDot = document.getElementById('dot_03');
    if (targetDot) { // 加个判断避免元素不存在报错
      targetDot.style.backgroundColor = "black";
    }
  }
}

小建议 #

另外，现在更推荐用 document.querySelectorAll('.dot') 来获取元素集合，它返回的是 NodeList，还支持直接用.forEach()遍历，写法更简洁：

// 用forEach遍历所有dot元素
document.querySelectorAll('.dot').forEach(dot => {
  dot.style.backgroundColor = "black";
});

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