新手求助：点击按钮弹窗选色修改container背景的JS代码不生效问题

现有代码的核心问题 #

• document.getElementsByClassName() 返回的是包含所有匹配类名元素的 HTMLCollection 类数组集合，不是单个DOM元素，直接操作集合的style属性会报错。如果要修改第一个匹配的.container元素，需要取下标为[0]的元素再操作。
• DOM style对象的背景色属性名是小驼峰格式的backgroundColor，你写的backGroundColor中字母G大写属于拼写错误，无法匹配到对应的样式属性。

修正后的代码 #

function changeColor() {
    let newColor = prompt("What color do you want?", "");
    // 兼容用户点击取消/未输入内容的场景
    if (!newColor) return;
    // 取第一个匹配的container元素修改背景色
    document.getElementsByClassName("container")[0].style.backgroundColor = newColor;
}

可选优化建议 #

如果页面存在多个.container元素需要同步修改颜色，可以遍历集合逐个操作：

function changeColor() {
    let newColor = prompt("What color do you want?", "");
    if (!newColor) return;
    const containerList = document.getElementsByClassName("container");
    for (let container of containerList) {
        container.style.backgroundColor = newColor;
    }
}

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