如何在JavaScript中通过单个onclick触发多个事件

问题背景 #

我是HTML/CSS/JavaScript新手，正在做小项目实践学习。已通过CSS变量实现网站暗黑模式：点击id为icon的月亮图标可切换主题并将其改为太阳图标，该功能正常。但尝试在同一onclick事件中切换另一图标icon2的图片时失败，想请教如何在点击切换主题时同时切换多个图标。

现有CSS代码 #

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

原有可正常运行的JavaScript代码 #

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"; // icon2未定义
    }else{
        icon.src = "/images/moon-stars-svgrepo-com.png";
        icon2.src = "/images/darkmode.png"; // icon2未定义
    }
}

问题原因 #

1. 重复声明变量：代码里重复写了var icon = document.getElementById("icon");，属于冗余代码。
2. 未获取icon2元素：直接使用icon2但没有通过document.getElementById("icon2")获取该DOM元素，浏览器会提示icon2 is not defined的错误，导致这部分代码执行失败。

修正后的代码 #

// 获取两个图标元素
var icon = document.getElementById("icon");
var icon2 = document.getElementById("icon2");

icon.onclick = function (){
    // 切换主题类
    document.body.classList.toggle("dark-theme");
    // 判断当前主题状态
    const isDark = document.body.classList.contains("dark-theme");
    
    // 切换icon的图片
    icon.src = isDark ? "/images/sun-2-svgrepo-com.png" : "/images/moon-stars-svgrepo-com.png";
    // 切换icon2的图片
    icon2.src = isDark ? "/images/lightmode.png" : "/images/darkmode.png";
}

额外优化建议 #

可以把图标路径存到元素的data-*属性里，让代码更易维护：

<!-- HTML里给图标添加data属性 -->
<img id="icon" src="/images/moon-stars-svgrepo-com.png" data-dark-src="/images/sun-2-svgrepo-com.png" data-light-src="/images/moon-stars-svgrepo-com.png">
<img id="icon2" src="/images/darkmode.png" data-dark-src="/images/lightmode.png" data-light-src="/images/darkmode.png">

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

icon.onclick = function (){
    document.body.classList.toggle("dark-theme");
    const isDark = document.body.classList.contains("dark-theme");
    
    // 通过data属性获取路径
    icon.src = isDark ? icon.dataset.darkSrc : icon.dataset.lightSrc;
    icon2.src = isDark ? icon2.dataset.darkSrc : icon2.dataset.lightSrc;
}

内容的提问来源于stack exchange，提问作者Kas