У меня есть свитчер, который переключает цвет темы сайта с темного на светлый и наоборот.
Он работает.
Но я добавил ещё один свитчер, который должен запускать ту же функцию. (то есть тот же свитчер, но в другом меню сайта) и он не работает.
Вот мой html код:
<! -- Первый свитчер -->
<div class="switch">
<label>
Светлая тема
<input type="checkbox">
<span class="lever"></span>
Тёмная тема
</label>
</div>
<! -- Второй свитчер но с дополнительным классом -->
<div class="switch switcher_sidebar_padding">
<label>
Светлая тема
<input type="checkbox">
<span class="lever"></span>
Тёмная тема
</label>
</div>
И вот собственно работающая Javascript функция.
const toggleSwitch = document.querySelector('.switch input[type="checkbox"] ');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
Моя попытка привязать эту функцию ко второму свитчеру. Но так не работает...
const toggleSwitch = document.querySelector('.switch input[type="checkbox"], .switch.switcher_sidebar_padding input[type="checkbox"], ');
//Далее следует тот же код, что и в выше написанной функции...
Так выглядит первый свитчер.
Второй выглядит также но просто находится в другом меню.