Задать вопрос
@flexpc
javascript

Почему не работает смена темы на сайте?

У меня есть вот такой код html:

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="\bootstrap5\css\bootstrap.css">
    <link rel="stylesheet" href="css\main.css" id="theme1">
    <link rel="shortcut icon" href="\resource\img\2379396.svg" type="image/x-icon">
    <link rel="stylesheet" href="css/fontello.css">
    <title>Закрепи Знания</title>
</head>
<body>
    <button id="theme" type="button" class="btn btn-primary active" data-toggle="button" autocomplete="off" aria-pressed="true">СМЕНИТЬ ТЕМУ</button>
    <script src="\bootstrap5\js\bootstrap.bundle.min.js"></script>
    <script src="\js\main.js"></script>
    <script src="\main.js"></script>
</body>
</html>

И вот такой js:

let switchMode = document.getElementById("theme");

switchMode.onclick = function() {
    let theme = document.getElementById("theme1");

    if (theme.getAttribute("href" == "css\main.css"))
    {
        theme.href = "css\main_dark.css";
        console.log(1);
    }
    else
    {
        theme.href = "css\main.css";
        console.log(0);
    }
}

Этот код должен менять тему на сайте, путем смены css, но почему-то этого не делает. Более того в консоль всегда выводится 0. В чем ошибка?
  • Вопрос задан
  • 155 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
@joseffie
У вас ошибка в строке if (theme.getAttribute("href" == "css\main.css")). Вы некорректно разместили условие, указав его в аргументах метода getAttribute.

Попробуйте заменить это на if (theme.getAttribute("href") == "css\main.css")
Ответ написан
3 комментария
3 комментария
irtek
@irtek
Wordpress-addicted
Первый момент, в пути к файлу нужно использовать обратный слеш "/", соответственно в html нужно обновить адрес в строке
<link rel="stylesheet" href="css/main.css" id="theme1">


Второй момент, атрибут правильнее присваивать через метод setAttribute нежели напрямую присваивать через "="

let switchMode = document.getElementById("theme");

switchMode.onclick = function() {
    let theme = document.getElementById("theme1");

    if (theme.getAttribute("href") === "css/main.css") {
        theme.setAttribute("href", "css/main_dark.css");
        console.log(1);
    } else {
        theme.setAttribute("href", "css/main.css");
        console.log(0);
    }
}
Ответ написан
2 комментария
2 комментария
@wakenbyWork
Необходимо поменять \ на /
<link rel="stylesheet" href="css/main.css" id="theme1">


const switchMode = document.querySelector("#theme");
const theme = document.querySelector("#theme1")

switchMode.addEventListener('click', () => {
  theme.href === 'css/main.css'
    ? theme.href = 'css/main_dark.css'
    : theme.href = 'css/main.css'
})
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка Roguelike-игры на Unity для Android
26 дек. 2024, в 01:11
120000 руб./за проект
Доработка веб-платформы на PHP
26 дек. 2024, в 00:27
35000 руб./за проект
Нарисовать обложку для рекламной кампании в VK Ads
25 дек. 2024, в 22:59
1000 руб./в час
Ещё заказы