Как иметь несколько событий одним щелчком мыши в JavaScript ⇐ CSS

[Anonymous]

Я новичок в этом деле и пробую небольшой проект, пока изучаю html/css/javascript. Итак, извините, если это довольно очевидный вопрос/ответ.
По сути, я сделал свой (очень простой) сайт темным режимом, используя эту настройку:
CSS

Код: Выделить всё

:root{
--primary-color: #ffffff;
--secondary-color: #1d1d1d;
}
.dark-theme{
--primary-color: #212121;
--secondary-color: #e0e0e0;
}

Затем я использую первичный/вторичный цвет для всех цветов фона/текста. Затем
СКРИПТ

Код: Выделить всё

var icon = document.getElementById("icon");

icon.onclick = function (){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "/images/sun-2-svgrepo-com.png";
}else{
icon.src = "/images/moon-stars-svgrepo-com.png";
}
}

Это так, когда кто-то щелкает мое изображение луны с тегом «значок», цвета инвертируются, и «значок» превращается в изображение солнца. Это идеально подходит для моего темного режима!
Я попытался вставить тот же процесс для «значка» внизу, чтобы посмотреть, произойдет ли это также при нажатии...

Код: Выделить всё

var icon = document.getElementById("icon");

var icon = document.getElementById("icon");

icon.onclick = function (){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "/images/sun-2-svgrepo-com.png";
icon2.src = "/images/lightmode.png";
}else{
icon.src = "/images/moon-stars-svgrepo-com.png";
icon2.src = "/images/darkmode.png";
}
}

это не сработало.
У меня вопрос: есть ли способ изменить другие мои изображения (png, используемые в качестве значков) с их изображение в светлом режиме на изображение в темном режиме. По сути, когда изображение луны меняется на изображение солнца при нажатии, как я могу переключить и другие мои изображения?
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/783 ... javascript