无法设置 'backgroundColor of undefined'

Question

我正在使用 document.getElementsByClassName 更改具有指定 class 名称的多个元素之一的背景颜色。

我在标题中有错误信息，我找不到任何错误，如果有错误请指出：

     function process() {
if (dv1 === 1 && dv2 === 1 && dv3 === 1) {
    turns = 0;
    document.getElementsByClassName('dot').style.backgroundColor = "black";
 }
}

<div class="dot" id="dot_01" onclick="dot_01()"></div>
<div class="dot" id="dot_02" onclick="dot_02()"></div>
<div class="dot" id="dot_03" onclick="dot_03()"></div>
<div class="dot" id="dot_04" onclick="dot_04()"></div>
<div class="dot" id="dot_05" onclick="dot_05()"></div>
<div class="dot" id="dot_06" onclick="dot_06()"></div>
<div class="dot" id="dot_07" onclick="dot_07()"></div>
<div class="dot" id="dot_08" onclick="dot_08()"></div>
<div class="dot" id="dot_09" onclick="dot_09()"></div>

Answer 1

getElementsByClassName returns an HTMLCollection。您需要遍历它并设置集合元素的样式。目前，您正在尝试在 HTMLCollection 对象本身的样式引用上设置属性，但它没有。

Answer 2

尝试遍历元素。

var elems = document.getElementsByClassName('dot');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.backgroundColor = ‘black’
}

Answer 3

尝试以下操作：

function process() {
    if (dv1 === 1 && dv2 === 1 && dv3 === 1) {
    turns = 0;
    let elems = document.getElementsByClassName('dot');

    for (let elem of elems) {
        elem.style.backgroundColor = "black"
    }
  }
}

无法设置 'backgroundColor of undefined'

Cannot set 'backgroundColor of undefined'

javascript

classname