Нельзя использовать один и тот же идентификатор для двух или более элементов HTML. Кроме того, если вы хотите использовать эту функцию в нескольких элементах, я настоятельно рекомендую вам , а не использовать onclick
inline. Вместо этого вы можете получить все переключатели со своей страницы и добавить к ним прослушиватель:
Получить все переключатели на своей странице
const switchers = document.querySelectorAll('.switcher');
Применить к ним прослушиватель событий click
switchers.forEach((element) => {
element.addEventListener('click', (event) => {
themeToggle(event);
});
});
Наконец, вы должны добавить класс switcher
ко всем элементам
<input type="checkbox" id="theme-switcher-1" class="switcher">
<input type="checkbox" id="theme-switcher-2" class="switcher">
<input type="checkbox" id="theme-switcher-3" class="switcher">
Используя этот подход, вы можете использовать этот метод на всем своем веб-сайте или в приложении, и его также легче поддерживать.
Обновление : вы должны настроить метод themeToggle () следующим образом:
function themeToggle(event){
var tSwitcher = event.target;
if(tSwitcher.checked){
localStorage.setItem('theme', 'dark-mode');
tSwitcher.classList.add('dark-mode'); // changed element to tSwitcher
console.log('Dark mode is on');
} else {
localStorage.setItem('theme', '');
tSwitcher.classList.remove('dark-mode'); // changed element to tSwitcher
console.log('Dark mode is off');
}
}
Пример фрагмента
Obs.: You следует настроить его в своем коде. Я должен был прокомментировать localStorage, потому что он не работал здесь.
const switchers = document.querySelectorAll('.switcher');
console.log(switchers);
switchers.forEach((element) => {
element.addEventListener('click', (event) => {
themeToggle(event);
});
});
function themeToggle(event){
var tSwitcher = event.target;
if(tSwitcher.checked){
//localStorage.setItem('theme', 'dark-mode');
tSwitcher.classList.add('dark-mode');
console.log('Dark mode is ON on ' + tSwitcher.id);
} else {
//localStorage.setItem('theme', '');
tSwitcher.classList.remove('dark-mode');
console.log('Dark mode is OFF on ' + tSwitcher.id);
}
}
<input type="checkbox" id="theme-switcher-1" class="switcher"><br />
<input type="checkbox" id="theme-switcher-2" class="switcher"><br />
<input type="checkbox" id="theme-switcher-3" class="switcher">