Почему не работает style для querySelector?

Question

[Вика Мармеладка]

Испробовал как querySelector, как querySelectorAll, так и getElementsByClassName. Но изменить значение style все равно не получается.

const buttons = document.getElementsByClassName('js-toggle-card');
    for (const button of buttons) {
        button.addEventListener('click', () => {
            let tags__secondaryEl = document.querySelector('tags__secondary');
            tags__secondaryEl.style.display = 'block';
        });
    }

Вот что говорит компилятор:

Answer 1

[Stalker_RED]

Он так говорит, потому что document.querySelector('tags__secondary') вернул null. То есть он не нашел элемента
<tags__secondary> у вас на странице.

Возможно вы имели в виду document.querySelector('.tags__secondary')

Comments

[Вика Мармеладка]

да, я это тоже пробовал, но дело в том что это будет работать только для первого класса.

const buttons = document.getElementsByClassName('js-toggle-card');
    for (const button of buttons) {

        button.addEventListener('click', () => {
            let tags__secondaryEl = document.querySelector('.tags__secondary');
            tags__secondaryEl.style.display = 'block';
        });
    }

[Stalker_RED]

Рич Пиана, объясните, пожалуйста, подробнее. В каком смысле "будет работать только для первого класса"?

[Вика Мармеладка]

Stalker_RED, если я нажимаю на первую кнопку, мой код срабатывает так, как нужно, открываются с правой стороны теги (в красном квадрате).


Но на остальные кнопки код не работает (пытаюсь нажать на вторую кнопку, но теги не появляются)

[Stalker_RED]

Рич Пиана, вы задали вопрос "Почему не работает style для querySelector?" и я на него дал ответ.

То, что у вас есть другие ошибки, включая архитектурные - это другой вопрос.

querySelector возвращает один элемент. Первый попавшийся, который соответствует селектору. Если вам нужно менять стили нескольким .tags__secondary, то используйте querySelectorAll или getElementsByClassName. С перебором, естественно.

[Вика Мармеладка]

Stalker_RED, я понял что нужно это реализовать перебором (человек ниже подсказал), но как, не знаю(

[Stalker_RED]

document.querySelectorAll(...)
   .forEach(elem => elem.style.foo = bar)

[Павел Корнилов]

Рич Пиана, ответ совершенно верный, отмечаю решением. Если остались вопросы, задавайте.
Кстати, если нужно часто работать с коллекциями элементов, возможно, имеет смысл использовать jQuery, поскольку в ней все переборы коллекций совершаются автоматически.
Пример:
$('.tags__secondary').css({color: 'red'});

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

[Вика Мармеладка]

v3shin, к сожалению это открывает все сразу теги, а мне нужно при нажатии на одного из них

[Stalker_RED]

Рич Пиана, для этого, наверное, нужно выбирать не все теги с таким классом, а только из определенной группы.
То есть не document.querySelectorAll() а someParentElement.querySelectorAll()

Answer 2

[v3shin]

document.querySelector('.tags__secondary'); // точку в селекторе забыли

Comments

[Вика Мармеладка]

да, я это тоже пробовал, но дело в том что это будет работать только для первого класса.

const buttons = document.getElementsByClassName('js-toggle-card');
    for (const button of buttons) {

        button.addEventListener('click', () => {
            let tags__secondaryEl = document.querySelector('.tags__secondary');
            tags__secondaryEl.style.display = 'block';
        });
    }

[v3shin]

Рич Пиана, вы же циклом for (const button of buttons) {} проходитесь по кнопкам. Почему бы не сделать по аналогии в обработчике нажатия?

[Вика Мармеладка]

v3shin, а как это можно сделать не могли бы помочь? Код не мой поэтому не стоит удивляться)

[v3shin]

Рич Пиана, типа такого.

let tags__secondaryEl = document.querySelectorAll('.tags__secondary') || [];
tags__secondaryEl.forEach(el => {
    el.style.display = 'block';
});

[Вика Мармеладка]

v3shin, к сожалению это открывает все сразу теги, а мне нужно при нажатии на одного из них

[v3shin]

Рич Пиана, это уже другой вопрос.

Answer 3

[baroman4ik]

точку добавь в объявлении querySelector