[解決済み] Uncaught TypeError: 未定義のプロパティ 'add' を読み取ることができません。

質問

以下のコードを .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 は4 <div> で、4つのタイルにそれぞれ個別にクラスを追加しようとしています。クラスは tileNumbers . Chromeでコードを実行すると、エラーが発生します。

"Uncaught TypeError: 未定義のプロパティ 'add' を読み取ることができません。

スペルは間違いなく全部正しいです。助けてください。

解決方法は？

を呼び出したい。 add にアクセスしようとすると、タイル上の add の関数を使用します。 tiles 配列そのものです。これは存在しません。

必要なのは add 関数は、個々のタイルの そのために、まずそれを取得します。

var tile = tiles[i];

そして、呼び出しを次のように変更します。

tile.classList.add(…);

(一時的な変数 tile を使用し tiles[i].classList.add を直接使用します。しかし、IMHOは専用の変数を使うことで、コードをより明確に読むことができると考えています)。

もう一つの選択肢は、より良い方法かもしれません。 forEach . を使うので i は現在の要素にアクセスするためだけのものであり、それ以外のものではありません。基本的に、各要素に対してアクションを実行したいのです。このようにすることもできます（ボーナスポイントとして、これはoff-by-oneエラーからも保護されます）。

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

そして、関数本体の中で、自動的に変数 tile にアクセスすることができます。

以上です :-)