Почему нельзя поменять класс у элементов?

Question

[FrikmanTo]

Пытаюсь при клике поменять класс у элементов. У тех, что я вижу -- все меняется. А если какой-то элемент на другой странице сайта, то вылезает ошибка Cannot read property 'classList' of null. Что я делаю не так? Помогите, пожалуйста.

UPD: Если зайти на страницу, где есть эти элементы, класс которых я хочу изменить, то все норм и ошибки нет

let darkTheme = function() {
    let darkPic = document.querySelector('.black');
    let lightPic = document.querySelector('.light-theme');

let header = document.querySelector('header');
let content = document.querySelector('.content');

darkPic.onclick = function() {
        lightPic.classList.toggle('hidden');
        darkPic.classList.toggle('hidden');
    }

lightPic.onclick = function() {
        lightPic.classList.toggle('hidden');
        darkPic.classList.toggle('hidden');
    }

if(!lightPic.classList.contains('hidden')) {
        header.classList.toggle('dark-theme');
        content.classList.toggle('dark-theme');
}

if(lightPic.classList.contains('hidden')) {
       header.classList.toggle('dark-theme');
        content.classList.toggle('dark-theme');
}

Comments

[FrikmanTo]

Pardon Me! Where Do I Find 4giveness?, К примеру, если на главной странице есть какие-то элементы, на которые можно нажать и откроется div, то пока они не открыты -- появляется данная ошибка. Когда я открываю этот div и нажимаю на картинку (по нажатию картинки меняется класс), то все окей.

Может ли вообще быть ошибка из-за этого? Пробовал создавать любые элементы -- не находит их, пока не открыто.

Answer 1

[Стас Хитрич]

Пример с кодом не полный. Функция не закрыта, не видно чего там в HTML. Но вообще, ошибка говорит, что querySelector не нашел элемент. Возможно селектор не правильный.

Comments

[FrikmanTo]

Нет, такой элемент есть. Это точно.

html в данном случае просто div, который открывается по клику.

[Стас Хитрич]

FrikmanTo,

UPD: Если зайти на страницу, где есть эти элементы, класс которых я хочу изменить, то все норм и ошибки нет

- то есть, если есть элементы на странице, то всё работает, а если нет, то не работает? Кажется мы нашли решение

[FrikmanTo]

Стас Хитрич, Я имею в виду, если есть div который открывается по клику и там есть какие-то элементы, то пока он не открыт -- ошибка появляется. Если я его открыл -- ошибки нет.

Я не уверен, что это причина ошибки. Просто заметил, что именно так и происходит.
может быть из-за этого?

[Стас Хитрич]

FrikmanTo, это из-за того, что до появления элемента на странице, возможно, он не отрисован. Если это например некая модалка которая появляется в DOM после загрузки, после закрытия он удаляется из DOM, то для изменения таких вещей следует пользоваться делегированием событий. Нельзя менять аттрибуты и значения того, что не на странице в момент события. Для большей помощи можете разместить пример на codepen.io например, повторить ситуацию и скинуть ссылку.

[FrikmanTo]

Стас Хитрич, а можно скинуть, если момент, где модалка открывается, написан на реакте?

[Стас Хитрич]

FrikmanTo, можно, но думаю лучше новую тему создать с указанием реакта))
Вот тут можно реакт онлайн пример сделать, ну и не только реакт
Я по ангуляру больше.

[FrikmanTo]

Стас Хитрич, Ладно, спасибо, попробую тогда сначала сам разобраться