Как сделать, чтобы скрипт срабатывал глобально?

[Alexeina66]

Всем привет!
Есть скрипт который переключает стили при переключении чекбокса
Работает отлично, но не работает на тех страницах, где нет самого чекбокса, а нужно, чтобы работал скрипт везде.

'use strict';
    // создаем <link rel="stylesheet" href="light|dark.css">
    let head = document.head,
            link = document.createElement('link');
    link.rel = 'stylesheet';
    // проверяем значение из localStorage если dark то темная тема
    if (localStorage.getItem('themeStyle') === 'dark') {
        link.href = 'dark.css'; // ссылка на темный стиль
        document.getElementById('switch-1').setAttribute('checked', true); // переключаем чекбокс в положение "темная тема"
    }
    // по умолчанию светлая тема
    else {
        link.href = 'light.css'; // ссылка на светлый стиль
    }
    head.appendChild(link); // вставляем <link rel="stylesheet" href="light|dark.css"> в шапку страницы между тегами head

    // событие при переключении чекбокса
    document.getElementById('switch-1').addEventListener('change', ev => {
        let btn = ev.target;
        // если чекбокс включен
        if (btn.checked) {
            link.href = 'dark.css'; // сключаем темную тему
            localStorage.setItem('themeStyle', 'dark'); // записываем значение в localStorage
        }
        else {
            link.href = 'light.css'; // включаем светлую тему
            localStorage.setItem('themeStyle', 'light'); // записываем значение в localStorage
        }
    });

Ошибку получаю по строке

document.getElementById('switch-1').setAttribute('checked', true);

 

[Sorcus]

Обернуть код в условие?

let element = document.getElementById("switch-1")
if (element !== null) {
  // Твой код
}

 

[Alexeina66]

Обернуть код в условие?

let element = document.getElementById("switch-1")
if (element !== null) {
  // Твой код
}

Сделал так, ошибка в консоли пропала, но скрипт не отрабатывается, должен помещаться в head <link rel="stylesheet" href="light|dark.css">

 let element = document.getElementById("switch-1");
if (element !== null) {
   'use strict';
    // создаем <link rel="stylesheet" href="light|dark.css">
    let head = document.head,
            link = document.createElement('link');
    link.rel = 'stylesheet';
    // проверяем значение из localStorage если dark то темная тема

    if (localStorage.getItem('themeStyle') === 'dark') {
        link.href = 'dark.css'; // ссылка на темный стиль
        document.getElementById('switch-1').setAttribute('checked', true); // переключаем чекбокс в положение "темная тема"
    }
    // по умолчанию светлая тема
    else {
        link.href = 'light.css'; // ссылка на светлый стиль
    }
    head.appendChild(link); // вставляем <link rel="stylesheet" href="light|dark.css"> в шапку страницы между тегами head

    // событие при переключении чекбокса

    document.getElementById('switch-1').addEventListener('change', ev => {
        let btn = ev.target;
        // если чекбокс включен
        if (btn.checked) {
            link.href = 'dark.css'; // сключаем темную тему
            localStorage.setItem('themeStyle', 'dark'); // записываем значение в localStorage
        }
        else {
            link.href = 'light.css'; // включаем светлую тему
            localStorage.setItem('themeStyle', 'light'); // записываем значение в localStorage
        }
    });
    }

 

[Sorcus]

А ты в курсе, что код размещенный в head не увидит кнопку, пока ты это не обернёшь в функцию, срабатывающую после загрузки всей страницы.
Либо размещать код перед закрывающим тегом body.

 

[Alexeina66]

А ты в курсе, что код размещенный в head не увидит кнопку, пока ты это не обернёшь в функцию, срабатывающую после загрузки всей страницы.
Либо размещать код перед закрывающим тегом body.

Может быть проще сделать чекбокс на той странице на которой не срабатывает но ее скрыть? Я просто хз как вставить код до body на js.

 

[Sorcus]

Может быть проще сделать чекбокс на той странице на которой не срабатывает но ее скрыть? Я просто хз как вставить код до body на js.

В смысле не знаешь?

document.addEventListener("DOMContentLoaded", () => {
  let element = document.getElementById("switch-1")
  if (element !== null) {
    // Твой код
  }
})

Дальше разберёшься?