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);
}

.html文件中的.tile是4 <div>，我试图分别添加四个图块中的每个图块。课程保存在tileNumbers。当我在Chrome中运行代码时，我收到错误：

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

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

Answer 1

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

您需要做的是访问每个磁贴的add功能。要做到这一点，首先得到它：

var tile = tiles[i];

然后，将您的电话改为

tile.classList.add(…);

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

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

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

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

它是： - ）

Answer 2

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

不

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

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

2 个答案: