Код кнопки переключения темной темы не работает?
Мой код, показанный ниже, для кнопки переключения темной темы не работает; Код Visual Studio не сообщает мне, что у меня есть какие-либо ошибки. Может ли кто-нибудь помочь мне понять, в чем проблема?
document.getElementById('themeButton').addEventListener('click'),
function() { /* Theme button script */
document.body.classList.toggle('dark-theme');
}body {
background-color: rgb(246, 246, 246);
color: black;
h1 {
color: rgb(63, 66, 145);
/* Header 1 features */
font-size: 50px;
padding-bottom: 8px;
margin: 10px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
/* Header 2 features */
margin: 10px;
}
p {
font-family: Arial, Helvetica, sans-serif;
/* Paragraph features */
font-size: 20px;
padding-bottom: 10px;
margin: 10px;
}
/* Dark theme styles */
.dark-theme {
background-color: #A9a9a9;
/* Dark gray background */
color: #F5F5F5/* Light gray body text */
}
.dark-theme h1 {
color: rgb(170, 172, 244)/* Light blue text for header 1 */
}
}<h1>Basic Website</h1>
<!-- Site text content -->
<hr>
<h2>Welcome to my basic webpage.</h2>
<p>This isn't my first time coding, but it's been so long that it might as well be.</p>
<img src = "treehouse.jpg" alt = "An elaborate treehouse.">
<!-- Image -->
<hr>
<button id = "themeButton">Change Theme Color</button>
<!-- Theme button -->Фон кнопки должен измениться на темно-серый, а текст должен стать светло-серым, но при нажатии кнопка ничего не меняет.
Моя консоль отладки и документация не показывают никаких проблем, если нет другого способа проверить?
addEventListener() требует как минимум два аргумента; вы поставляете один, "click".
Итак, следует ли мне использовать что-то другое, кроме addEventListener(), или мне нужно будет добавить еще один аргумент щелчка?
Согласно документации , ваша функция должна быть вторым аргументом.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
У вас здесь ошибка
document.getElementById('themeButton').addEventListener('click'), function() { /* Скрипт кнопки темы */ document.body.classList.toggle('темная тема'); }
Вы должны передать функцию в качестве второго аргумента addEventListener, вот так
document.getElementById('themeButton').addEventListener('click', function() { /* Theme button script */
document.body.classList.toggle('dark-theme');
});
Вам также придется переместить правила .dark-theme CSS за пределы тела, потому что, если вы используете их, как в вашем примере, они могут влиять только на дочерние элементы тела, а не на само тело.
body {
/* Main body styles */
}
/* Dark theme styles */
.dark-theme {
}
Спасибо, что уловили это. Однако я изменил его, как вы показали здесь, и кнопка все еще не работает.
@m00nbugs, вам также следует переместить правила селектора CSS .dark-theme за пределы селектора тела, поскольку они не могут повлиять на сам селектор, а только на его дочерние элементы при использовании, как в вашем примере. Я обновил ответ.
Наконец-то я это понял! Большое спасибо за помощь!
(Two examples ahead!)
Вам нужно ссылаться на себя body, используя & во вложенном CSS , поскольку вы фактически переключаете этот класс в элементе body, используя document.body.classList.toggle('dark-theme');
body {
/* Default body styles */
&.dark-theme { /* alias for: body.dark-theme */
/* Dark theme body styles */
}
}
Затем для H1 вы можете использовать: H1 является потомком класса body темной темы, например:
h1 {
/* Default h1 styles */
.dark-theme & { /* alias for: .dark-theme h1 */
/* Dark theme h1 styles */
}
}
и так же, как и выше h1 стили, вы можете стилизовать любой другой селектор.
Кроме того, в вашем JS была опечатка; все исправлено в следующем примере:
document.querySelector("#theme").addEventListener("click", () => {
document.body.classList.toggle("dark-theme");
});body {
background: #fff;
color: #333;
&.dark-theme {
background: #333;
color: #fff;
}
}
a {
color: #0bf;
.dark-theme & {
color: #fb0;
}
}<button type = "button" id = "theme">Toggle theme</button>
<h1>TITLE</h1>
<p>Lorem ipsum <a href = "#">dolor</a> sit amet.</p>Честно говоря, я бы не стал создавать какие-либо кнопки для переключения чего-либо. Чем меньше пользовательского интерфейса, тем лучше, а сейчас 2024 год. Темные темы довольно распространены в дизайне пользовательского интерфейса. Вместо этого я бы сосредоточился на предпочитаемой пользователем теме ОС, используя @media предпочитает цветовую схему и некоторые свойства CSS:
:root {
--accent: #0bf;
--color: #333;
--bg: #fff;
@media (prefers-color-scheme: dark) {
--accent: #0bf;
--color: #fff;
--bg: #333;
}
}
body {
background: var(--bg);
color: var(--color);
}
a {
color: var(--accent);
}<h1>TITLE</h1>
<p>Lorem ipsum <a href = "#">dolor</a> sit amet.</p>Спасибо, но это просто базовое задание по кодированию.
@m00nbugs Всегда пожалуйста! И я также дал вам тривиальное решение CSS. Идеально подходит для базовых задач по кодированию.
Есть ли какие-либо ошибки в вашей консоли разработчика? Подсказка: проверьте документацию addEventListener.