Почему JS не видит CSS файл при использовании setAttribute?

Question

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.

Answer 1

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

<link rel="stylesheet" href="css/theme-dark.css" id="theme">

theme.setAttribute('href', "../css/theme-dark.css");

Answer 2

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

/* Смена цветовой темы */
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 у ссылки.

БЛОГ НА HUSL

Почему JS не видит CSS файл при использовании setAttribute?

Ответы (2 шт):