未捕获的类型错误：无法读取未定义的属性“添加”答案

【问题标题】：Uncaught TypeError: Cannot read property 'add' of undefined未捕获的类型错误：无法读取未定义的属性“添加”
【发布时间】：2017-02-07 11:30:58
【问题描述】：

我的.js 文件中有以下代码：

var tiles = document.querySelectorAll(".tile");
var tileNumbers = ["one", "two", "three", "four"];

for(var i = 0; i < tiles.length; i++){
    var num = Math.floor(Math.random() * tileNumbers.lenth);
    tiles.classList.add(tileNumbers[num]);
    tileNumbers.pop(num);
}

.tile 是 .html 文件中的 4 个<div>，我正在尝试分别为四个图块中的每一个添加一个类。课程在tileNumbers 举行。当我在 Chrome 中运行代码时，出现错误：

“未捕获的类型错误：无法读取未定义的属性‘添加’。”

我很确定所有内容都拼写正确。请帮忙！

【问题讨论】：

将tiles => tiles[i] 更改为for()。
另外，一个错字：tileNumbers.lenth 应该是 tileNumbers.length
另外，tileNumbers.pop(num); 不会像您想的那样做，因为 .pop() 不接受参数。您可能正在寻找.splice(num, 1)

标签： javascript

【解决方案1】：

您想在磁贴上调用add，但尝试访问tiles 数组本身的add 函数。这不存在。

您需要做的是访问每个磁贴的add 功能。为此，首先获取它：

var tile = tiles[i];

然后，将您的呼叫更改为

tile.classList.add(…);

（您也可以省略临时变量tile，直接使用tiles[i].classList.add。但恕我直言，使用专用变量会使代码更清晰易读。）

另一个可能更好的选择是使用forEach。由于您使用 i 仅用于访问当前元素而不是其他任何内容，因此您基本上希望对每个元素执行一个操作。您也可以这样做（而且，对于奖励积分，这甚至可以保护您免受错误的影响）：

tiles.forEach(function (tile) {
  // ...
});

然后，在函数体内，您会自动拥有一个变量tile，您可以按照自己想要的方式访问它。

就是这样:-)

【讨论】：

感谢您的回复，另一个问题：我在磁贴之后和“.classList”之前添加了“[i]”，并且在所有磁贴的类列表中都得到了一个“未定义”类。
PS：如果这回答了您的问题，如果您可以将此答案标记为已接受，那就太好了:-)
看，我发布了另一个问题，但是我会为你做的。

【解决方案2】：

tiles[i].classList.add(tileNumbers[num]);

不是

tiles.classList.add(tileNumbers[num]);

【讨论】：