未捕获的类型错误: 无法读取未定义属性 'add'。

Question

我有以下代码写在我的.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中运行代码时，出现以下错误：

"Uncaught TypeError: Cannot read property 'add' of undefined."

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

- Seth Harlaar

---

在 for() 中将 tiles 改为 tiles[i]。 - Tushar

还有一个错别字：tileNumbers.lenth 应该是 tileNumbers.length。 - user1106925

另外，tileNumbers.pop(num);并不是你想象中的那样，因为.pop()不接受参数。你可能正在寻找.splice(num, 1)。 - user1106925

Answer 1

你想在瓷砖上调用add函数，但是试图访问tiles数组本身的add函数，这个函数不存在。

你需要做的是访问每个单独瓷砖的add函数。为此，首先获取它：

var tile = tiles[i];

然后，更改您的调用

tile.classList.add(…);

你也可以省略临时变量tile，直接使用tiles[i].classList.add。但在我看来，使用专门的变量可以使代码更易读。

另一个可能更好的选择是使用forEach。由于你只使用i来访问当前元素，没有其他用途，基本上你想对每个元素执行操作。你也可以像这样做（并且为了额外加分，这还可以防止off-by-one错误）：

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

然后，在函数体内，你可以自动访问一个变量tile，并以你想要的方式使用它。

就是这样 :-)

- Golo Roden

---

谢谢回复，还有一个问题：我在“tiles”后面加了“[i]”，然后加上“.classList”，结果所有的瓷砖类别列表都变成了“undefined”。 - Seth Harlaar

如果这个回答解决了您的问题，那么很棒如果您可以将这个答案标记为已接受 :-) - Golo Roden

查一下，我发布了另一个问题，但是没问题，我会为你做的。 - Seth Harlaar

Answer 2

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

不是

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

- Abdennour TOUMI