Почему не работает скрипт, если взять переменную через getElementsByClassName?

Question

[Дмитрий]

Здравствуйте. Взял готовый скрипт "Показать / Скрыть блок" и передал под себя.
Изначально переменная переменная "let content" бралась через getElementById.
Но т.к. мне нужно скрыть блоки массово, то решил поэкспериментировать через классы, методом getElementsByClassName.
Безуспешно(((. В чём причина?

Comments

[WapSter]

Во первых твой код не работает formOrder не определена.
Во вторых если не знаешь, что тебе приходит используй консоль лог
В третьих getElementsByClassName возвращает коллекцию элементов, обращаться к какому либо элементу можно по его индексу

[Дмитрий]

WapSter,
да, спасибо. formOrder подправил.
Попробовал вместо getElementsByClassName обратиться через querySelectorAll. Суть не поменялась

[Максим]

Дмитрий, getElementsByClassName хоть querySelectorAll возвращает коллекцию элементов .. то есть их много

что бы присвоить им всем какой то class надо их перебрать for forEach

[Дмитрий]

Mellorn, проще каждый перебрать) там 20 блоков) Код конечно будет страшный

Answer 1

[Александр Черемхин]

var content = document.getElementsByClassName('content'); // возвращает массив элементов

connect.forEach( con=>con.addEventListener("click", () => {
    content.style.display = "block"
}))

Comments

[Дмитрий]

в консоле не выдаёт)) Uncaught ReferenceError: connect is not defined"

[WapSter]

Дмитрий, ты не в состоянии исправить имя переменной?

[Дмитрий]

WapSter, дружище, я конечно понимаю, что тебя раздражают такие незнающие, как я. Возможно ты гуру и тебе это покажется чем то из "невероятно лёгкого". Но если не получается у меня, наверное я бы не спрашивал??? Да, я не знаток js, особенно этого упрощенного кода. Уж мог бы догадаться...

[WbICHA]

Дмитрий, а причём здесь жс, если ты даже не понимаешь, что у переменных могут быть разные имена?

[WbICHA]

Александр Черемхин, WapSter, вы, кстати, упустили самое главное: getElementsByClassName возвращает ХТМЛКоллекцию, а не НодЛист, то есть у него нет своего форЫча.
Иными словами, этот код нерабочий.

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

Answer 2

[mikhailivanko]

Вот рабочий вариант с перебором HTMLColletion в .content:


Но зачем вам перебирать все элементы с одним и тем же классом, если их все можно поместить в один блок, и скрывать только его? Ну то есть мы можем спокойно обойтись без перебора HTMLCollection немного изменив верстку.
Вот так: