未捕获的TypeError：无法读取未定义的属性“ 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中运行代码时，出现错误：

“未捕获的TypeError：无法读取未定义的属性'add'。”

我很确定一切都拼写正确。 请帮忙！

Answer 1

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

您需要做的是访问每个单独图块的add功能。 为此，请首先获取它：

var tile = tiles[i];

然后，将通话更改为

tile.classList.add(…);

（您也可以忽略临时变量tile ，而直接使用tiles[i].classList.add 。但是IMHO使用专用变量使代码更易于阅读。）

另一个可能更好的选择是使用forEach 。 由于您仅将i用于访问当前元素，而没有别的选择，因此您基本上希望对每个元素执行一个操作。 您也可以像这样进行操作（对于积分，这甚至可以保护您免于一次失误）：

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

然后，在函数体内，您将自动拥有一个可以按所需方式访问的可变tile 。

而已 ：-）

Answer 2

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

不

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