错误："无法读取未定义的属性"div"

Question

我一直收到这个错误

"无法读取未定义的"的属性"div"；

这是我的代码

function checkCard(){
for(let i = 0; i < 13; i++){
if(animalNums[i].animal.textContent === findArray[i].div.textContent){
animalNums[i].animal.style.display = "block"
animalNums[i].animal.classList.add("animate");
setTimeout(function(){animalNums[i].animal.classList.remove("animate");},1001)
score += 1
document.getElementById("scoreP").innerHTML = `Score: ${score}` 
}
}
}

据说findArray[i].div未定义这是它所引用的数组：

let findArray = [ 
{
div: document.getElementById("findOne")
},
{
div: document.getElementById("findTwo")
},
{
div: document.getElementById("findThree")
}
]

我不知道为什么会发生这种情况，因为我相信我做过一个与以前非常相似的功能。这与Scope有关吗？

Answer 1

发生这种情况的最可能原因是，您正在对值为'i'的数组进行迭代，该值大于数组长度本身。您正在使用值i < 13并递增"i"。您的数组可能少于12个元素，当您试图获取第12个索引处的值时，您会得到"undefined"，因为该'i'值处没有索引。还有一点需要记住，数组是基于0的。

由于您还没有共享整个数组，因此我不能确定，但您可以看到下面的示例片段来理解我的意思：

let findArray = [
{
div: document.getElementById("findOne"),
},
{
div: document.getElementById("findTwo"),
},
{
div: document.getElementById("findThree"),
},
];
(function checkCard() {
for (let i = 0; i < 4; i++) {
console.log(i, findArray[i].div);
}
})();

<div id="findOne"></div>
<div id="findTwo"></div>
<div id="findThree"></div>

因此，与传递i < 13的硬编码值相比，这里要做的更好的事情是将i的值传递为<findArray.length属性，如下所示：

let findArray = [
{
div: document.getElementById("findOne"),
},
{
div: document.getElementById("findTwo"),
},
{
div: document.getElementById("findThree"),
},
];
(function checkCard() {
for (let i = 0; i < findArray.length; i++) {
console.log(i, findArray[i].div);
}
})();

<div id="findOne"></div>
<div id="findTwo"></div>
<div id="findThree"></div>

Answer 2

@sabbir.alam是的，我可以console.log函数中的数组。

@ShaneerM13是的，我不确定这是最好的写法。我更想展示我得到的错误，因为它发生在很多不同的函数中。