-1

let switcher = document.querySelector('.themeSwitch');
let theme = document.getElementById('theme');

switcher.addEventListener('click', function()
{    
    if (theme.getAttribute('href') == "../css/theme-dark.css")
    {
        theme.setAttribute('href', "../css/theme-light.css");
    }
    else
    {
        theme.setAttribute('href', "../css/theme-dark.css");
    } 
});
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="css/style.css"> <!-- Основные стили -->
    <link rel="stylesheet" href="css/theme-dark.css" id="theme"> <!-- Тема по умолчанию -->
    <link rel="stylesheet" href="css/adaptive.css"> <!-- Адаптивные стили -->
    <link rel="stylesheet" href="css/after-before-action.css"> <!-- Стили переходов, динамичности -->
</head>
<body>
<div class="settings">
                    <a class="themeSwitch" href=""><img src="../design/icons/icons8-контраст-50.png" alt=""></a>
                    <a href=""><img src="../design/icons/icons8-земной-шар-50.png" alt=""></a>
                    <a href=""><img src="../design/icons/icons8-настройки.svg" alt=""></a>
                </div>
  <script src="js/script.js"></script>
</body>

При клике на ссылку с классом themeSwitch, в JS должен сработать код, изменяющий один css файл на другой и обратно. Так по умолчанию стоит файл theme-dark.css, при клике станет theme-light.css. В консоли выходит ошибка, что на 12 строчке в script.js не получается найти файл theme-dark.css. введите сюда описание изображения Пути написаны правильно. В этом я уверен и прикладываю скриншот. В каталоге js находится script.js, в css все файлы css.

2 ответа 2

0

Сравни и исправь:

<link rel="stylesheet" href="css/theme-dark.css" id="theme">
theme.setAttribute('href', "../css/theme-dark.css");
4
  • Я исправил на theme.setAttribute('href', "css/theme-dark.css"); и theme.setAttribute('href', "css/theme-light.css"); соответственно. Ошибки теперь нет, но и результат не тот. Файл theme-light.css подключается лишь на доли секунды. 5 мар 2022 в 10:48
  • @ВагифХалилов, ну раз подключается, значит всё работает.
    – Qwertiy
    5 мар 2022 в 10:49
  • Так то да, но мне нужно, чтобы файл theme-light.css подключался полностью и оставался до тех пор, пока пользователь не нажмёт на ссылку вновь. Я ведь меняю тему с тёмной на белую и наоборот. 5 мар 2022 в 10:52
  • Ну если у тебя скрипты кривые, то бери и правь. Поставь dom breakpoint на изменение атрибутов этого тега и смотри, откуда меняется.
    – Qwertiy
    5 мар 2022 в 10:57
0

Такой скрипт решил проблему:

/* Смена цветовой темы */
let switcher = document.getElementById('themeSwitch');
let theme = document.getElementById('theme');

switcher.onclick = function()
{
    if (theme.getAttribute('href') == 'css/theme-dark.css')
    {
        theme.href = "css/theme-light.css"; 
        return false; 
    }
    else 
    {
        theme.href = "css/theme-dark.css"; 
        return false; 
    }
};

В HTML поменял только class на id у ссылки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.