@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)
  • Вопрос задан
  • 81 просмотр
Решения вопроса 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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект