求助：家庭自动化仪表盘Toggle按钮切换Sun/Moon SVG图片实现

我正在开发一款家庭自动化仪表盘，需要实现Toggle按钮切换ON/OFF状态时同步切换图片：开启状态显示sun.svg，关闭状态显示moon.svg。目前已完成状态文字（ON/OFF）的切换功能，但图片切换功能尚未实现，尝试网上示例后仍未解决，现附上当前的HTML代码和JavaScript代码片段，寻求技术帮助。

现有HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <!-- Add font from Google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <!-- Link CSS style sheet to html document -->
    <link rel="stylesheet" href="style.css">
    <!-- Link JavaScript file to html document -->
    <script src="mqttws31.js"></script>
    <script src="dashboard.js"></script>
  </head>
  <body>
    <div class="header">
      <h1>Home Automation Dashboard</h1>
    </div>
    <hr>
    <div id="messages"></div>
    <div id="status"></div>
    <hr>
    <ul class="dashboard">
    <ol class="b"> 
      <li class="dashboard_item kitchen">
      <img src="./moon.svg" width="40px" height="40px" alt="">
        <h4>Kitchen</h4>
        <p id="kitchen-light">OFF</p>
        <button id="kitchen-btn">Toggle</button>
      </li>
      <ol class="b"> 
        <li class="dashboard_item frontdoor" > 
        <img src="./door-closed.svg" width="40px" height="40px" alt="">
        <h4>Front Door</h4>
        <p>CLOSED</p>
      </li>
    </ul>
  </body>
</html>

现有JavaScript代码 #

// variable in js
var KitchenState = true;

var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {
      document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
      KitchenState = !KitchenState;
});

解决方案 #

要实现图片同步切换，只需两步修改：

1. 给图片元素添加唯一ID #

修改HTML中厨房区域的<img>标签，添加id="kitchen-img"，方便JavaScript精准获取该元素：

<img id="kitchen-img" src="./moon.svg" width="40px" height="40px" alt="">

2. 更新JavaScript逻辑，同步切换图片 #

在按钮点击事件中，新增图片src属性的切换逻辑，和文字切换逻辑保持一致：

var KitchenState = true;
// 获取图片元素
var kitchenImg = document.getElementById("kitchen-img");
var el = document.getElementById("kitchen-btn");

el.addEventListener('click', function() {
    // 切换状态文字
    document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
    // 切换图片
    kitchenImg.src = KitchenState ? "./sun.svg" : "./moon.svg";
    // 翻转状态
    KitchenState = !KitchenState;
});

逻辑说明 #

• 初始状态KitchenState = true，对应点击后显示ON和sun.svg，与初始的OFF文字、moon.svg图片匹配（因为点击后才会翻转状态）
• 每次点击按钮时，根据当前KitchenState的值同步更新文字和图片的状态，确保两者始终一致

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