未捕获的类型错误：无法设置未定义的属性 - 但 console.log 显示值答案

【问题标题】：Uncaught TypeError: Cannot set property of undefined - but console.log is showing value未捕获的类型错误：无法设置未定义的属性 - 但 console.log 显示值
【发布时间】：2015-10-08 22:17:53
【问题描述】：

我正在尝试使用document.getElementsByClassName() 和一个变量来选择一个具有类名的 div。但是，当函数触发时，我得到 Uncaught TypeError: Cannot set property 'display' of undefined. 我用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); 返回一个数组的事实。最后的解决方法很简单，我只需要在函数最后一行的lightBox变量后面加上[0]，就可以选择数组中的第一个元素：

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

【问题讨论】：

请分享console.log(lightBox)的输出；
developer.mozilla.org/en-US/docs/Web/API/Document/… 返回具有所有给定类名的所有子元素的类数组对象。
lightBox.style 未定义，因为 lightbox 不是 DOM 元素

标签： javascript function variables

【解决方案1】：

document.getElementsByClassName(itemId) 返回一个数组。您需要遍历 lightBox 对象。

for(var idx = 0; idx < lightBox.length; idx++) {
    lightBox[idx].style.display = 'block' ;
}

【讨论】：

嗨拉朱。我最终没有使用您的代码，但您的回答是最有帮助的，因为它指出我错过了返回数组的事实。我将更新我的问题以显示我的解决方案。感谢您的帮助。

【解决方案2】：

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

【讨论】：