Uncaught TypeError: Не удается прочитать свойство «добавить» неопределенной

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

«s в файл .html, и я пытаюсь добавьте класс каждый из четырех фрагментов отдельно. Занятия проводятся в tileNumbers. Когда я запускаю код в Chrome, я получаю сообщение об ошибке:

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

Я уверен, что все написано правильно. Пожалуйста помоги!

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, что вы может получить доступ так, как вы хотите.

Все :-)

Answer 2

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

Не

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