如何在 javascript 中通过一次 onclick 获得多个事件

Question

我对此非常陌生，正在尝试一个小项目，同时学习 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";
   }
}

当有人点击我标记为“图标”的月亮图像时，颜色就会反转，“图标”就会变成太阳图像。这非常适合我的黑暗模式！

我尝试在下面插入相同的“图标”过程，看看它是否也会在 onclick 时发生......

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，用作图标）从浅色模式图像更改为深色模式图像。基本上，当通过点击将月亮图像更改为太阳图像时，我怎样才能让其他图像也切换？

谢谢！

Answer 1

您需要将第二个图标名称从

icon

更改为其他名称，例如

icon-2

，因为在 HTML 文档中不能有多个具有相同

id

的元素。

应该是这样的

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

 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";
        }
 }

你的 html 元素也应该反映出来

 <img id="icon-2" src="" alt=""/>

如果您在 CSS 中使用

class

而不是

id

，则仅允许对多个元素使用单个名称