QuerySelectorAll не находит существующие объекты, как и что делать?

Question

[BanterFace]

function a(a) {
	return document.querySelectorAll(a);
}
//Цикл запускается по клику
for (var i = 0; i <= 9; i++) {
	setTimeout(function(){a('.add_list > div')[i].style.opacity = 1}, i*30);
};

a('.add_list > div')[0] и последующие — выдают undefined и всё крашится. Если запустить тот же код из консоли, а не по клику — всё находится и работает. В чём проблема?

Вживую можно глянуть тут, чтобы запустить цикл нужно нажать на этот элемент:

, он же .add.

Answer 1

[0xD34F]

Если вы полагаете, что i в момент выполнения a('.add_list > div')[i] будет равно 0, 1, 2, и т.д., то вы сильно ошибаетесь. Оно всегда будет равно 10. Объявите i с помощью let вместо var.

Ну и конечно несколько странно пытаться что-то делать с элементом, в существовании которого вы не удостоверились. Проверку бы какую сделали, что ли. А лучше - изначально обрабатывать только то, что есть:

[...document.querySelectorAll('.add_list > div')].slice(0, 10).forEach((n, i) => {
  setTimeout(() => n.style.opacity = 1, i * 30);
});