未捕获的TypeError：无法设置undefined的属性 - 但是console.log显示值

Question

我正在尝试使用document.getElementsByClassName()和变量选择带有类名的div。但是当函数触发时我得到 Uncaught TypeError：无法设置undefined的属性'display'。 我用console.log运行了一些测试，它显示变量属性已定义并且它有一个值。继承人的职责：

function openLightBox() {
 var itemId = event.target.id; 
 var lightBox = document.getElementsByClassName(itemId);

 console.log(lightBox);
 lightBox.style.display = 'block' ;
};

如您所见，我正在将变量变量lightBox记录到控制台，这将显示正确的值。我很困惑为什么这个函数的最后一行不起作用。

更新

我错过了var lightBox = document.getElementsByClassName(itemId);返回一个数组的事实。解决方案最后非常简单，我只需要在函数的最后一行[0]变量之后添加lightBox来选择数组中的第一个元素：

function openLightBox() {
 var itemId = event.target.id; 
 var lightBox = document.getElementsByClassName(itemId);
 console.log(lightBox);
 lightBox[0].style.display = 'block' ;
};

Answer 1

lightBox返回一个数组。您需要遍历for(var idx = 0; idx < lightBox.length; idx++) { lightBox[idx].style.display = 'block' ; } 对象。

{{1}}

Answer 2

itemId是您要定位的DOM元素的ID吗？如果是这样，您应该使用document.getElementById(itemId)。