Почему не работает querySelectorAll?

Question

[Артур Левенсон]

Объясните пожалуйста, почему во время применения querySelectorAll стили не задаются для блоков? но если задать querySelector, то нужный стиль применяется для нужного блока.

Логика такая: по нажатию на button должен появляться блок. По умолчанию у блоков стоит display: none, по нажатию на button должно меняться на display: Block

https://codepen.io/kiskiskit/pen/gOxGpBe

Comments

[Lynn «Кофеман»]

Потому что тут вам не jQuery

Посмотрите в документации что возвращает querySelectorAll

Answer 1

[Rsa97]

Потому что querySelectorAll возвращает список элементов (NodeList). Присваивать списку стиль бесполезно, его надо перебирать и работать с каждым элементом.

Answer 2

[Надим]

Потому что в отличии от jQuery на чистом JavaScript надо перебирать элементы по одному при помощи цикла и уже внутри цикла к каждому элементу применять необходимый стиль. Пример:

document.querySelectorAll('.class').forEach(function(element) {
    element.style.display = 'block';
});

Для всех элементов .class будет установлен стиль display: block

Comments

[Артур Левенсон]

спасибо большое! теперь понял

[OLEGatorRB2]

Скажите, а почему когда выносишь document.querySelectorAll('.class') в переменную, код не работает?
Это делать нельзя?

[Надим]

OLEGatorRB2, document.querySelectorAll('.class') возвращает коллекцию элементов и его можно записывать в переменную. Если у вас от этого перестает работать код, значит вы просто где-то накосячили.