点击按钮修改div背景色报Cannot set property 'BackgroundColor' of undefined错误

错误根因 #

• 第一个错误：document.getElementsByClassName("random") 返回的是匹配所有random类名的HTMLCollection类数组集合，并非单个DOM元素，直接访问集合的.style属性本身就是undefined，因此触发属性赋值报错。你需要通过索引[0]获取集合中第一个匹配的div元素。
• 第二个错误：DOM的样式属性采用小驼峰命名规则，修改背景色的正确属性名是backgroundColor，你写的BackgroundColor首字母大写不符合规范，即使解决了第一个问题样式也无法生效。

修复后的代码 #

你只需要修改事件回调内的赋值语句即可，修改后完整的script部分如下：

window.onload = function() {
    document.getElementById("button").addEventListener('click', function() {
        // 取类数组第一个元素 + 修正样式属性名
        document.getElementsByClassName("random")[0].style.backgroundColor = "black";
    });
}

如果你需要修改所有匹配random类名的元素背景色，可以遍历HTMLCollection：

const randomEls = document.getElementsByClassName("random");
for(let i = 0; i < randomEls.length; i++){
  randomEls[i].style.backgroundColor = "black";
}

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