Как добавить класс при клике?

Question

[Nicknick1]

Можете пожалуйста объяснить что я сделал в коде не так, что он не может при нажатии на элемент #cms_contacts присвоить класс .block элементу .header_sub_cms_contacts?

const contact_btn = document.querySelector('#cms_contacts');
const block = document.querySelector('block');
const sub_contacts = document.querySelector('header_sub_cms_contacts');
console.log(contact_btn);
console.log(block);
console.log(sub_contacts);

contact_btn.addEventListener('click', function () {
    sub_contacts.classList.add('block')
})

.header_sub_cms_contacts {
    display: none;
    margin-top: $space;

    ul {
        @include flex-between;
        justify-content: left;

    & li * {
        display: block;
        color: $grey;
        margin-top: 1em;
    }
    }
}

.block {
    display: block;
}

<div class="header_cms_contacts">
                <ul>
                <li>Lorem ipsum</li>
                <li id="cms_contacts">Список контактов</li>
            </ul>
            </div>
            <div class="header_sub_cms_contacts">
                <ul>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
            </ul>
            </div>

Пишет ошибку Cannot read properties of null (reading 'classList')
at HTMLLIElement. (script.js:17:18)

Comments

[Ankhena]

const sub_contacts = document.querySelector('header_sub_cms_contacts');

Потеряли точку.
header_sub_cms_contacts это класс, а не тег.
block тоже.

Answer 1

[limpch]

ты не правильно используешь querySelector. Селектор класса нужно указывать с точкой в начале, вот так:

const contact_btn = document.querySelector('#cms_contacts'); // id
const block = document.querySelector('.block'); // class
const sub_contacts = document.querySelector('.header_sub_cms_contacts'); //class

У тебя из за этого не находит элемент, из за того что он ищет по тегу, и ты типа пытаешься найти
<block></block>
а не
<div class="block"></div>

Comments

[limpch]

Еще могу посоветовать делать проверку на null. Это очень полезно и поможет тебе в будущем.

[Nicknick1]

limpch, Спасибо большое, а почему значение получается null?

Условно, я делаю всё как в видосе , но опять таки

script.js:14 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:14:13

Ведь текст то есть у этого элемента

[limpch]

Nicknick1, если элемент не находит, вместо него приходит null.