求助：家庭自动化仪表板中门状态变更时切换SVG图片

我希望在家庭自动化仪表板中实现：当门的状态从CLOSED切换为OPEN时，将门的SVG图片从door-closed.svg更换为door-open.svg，目前尝试的代码无法实现该功能，寻求技术帮助。

我使用的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">
      <li class="dashboard_item kitchen">
        <h4>Kitchen</h4>
     <img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">
        <p id="kitchen-light">OFF</p>
        <button id="kitchen-btn">Toggle</button>
      </li>
        <li class="dashboard_item frontdoor" > 
        <h4>Front Door</h4>
    <img src="./door-closed.svg" width="40px" id="toggle-img6" height="40px" alt="">
        <p id="frontdoor-door">CLOSED</p>
      </li>
     </ul>
  </body>
</html>

我尝试的JavaScript代码 #

function togglefrontdoor() {
  var status = document.getElementById("frontdoor-door").innerHTML;
  if (status === "CLOSED")
    document.getElementById('toggle-img6').innerHTML = './door-closed.svg';
  else if (status === "OPEN")
     document.getElementById('toggle-img6').innerHTML = './door-open.svg';
}

问题分析 #

当前代码存在两个核心错误：

1. 错误操作图片属性：img元素的图片路径是通过src属性控制的，而非innerHTML——innerHTML用于设置元素内部的HTML内容，对img标签完全不适用。
2. 逻辑反向且无实际更新：判断状态为CLOSED时设置的还是原图片路径，等于没有切换动作。

修正后的JavaScript代码 #

function togglefrontdoor() {
  const statusElement = document.getElementById("frontdoor-door");
  const doorImg = document.getElementById("toggle-img6");
  const currentStatus = statusElement.textContent.trim();

  if (currentStatus === "CLOSED") {
    doorImg.src = "./door-open.svg";
    statusElement.textContent = "OPEN"; // 同步更新状态文本，保证UI一致性
  } else if (currentStatus === "OPEN") {
    doorImg.src = "./door-closed.svg";
    statusElement.textContent = "CLOSED";
  }
}

关键优化点 #

• 使用src属性修改图片路径，这是操作img元素图片的正确方式
• 用textContent代替innerHTML获取状态文本，避免HTML标签干扰，更安全可靠
• 添加trim()处理状态文本，防止前后空格导致判断失效
• 同步更新状态文本，确保图片和文字显示的状态一致

额外注意事项 #

确保togglefrontdoor()函数被正确触发：如果是通过MQTT接收门状态变化，需要在MQTT消息回调中调用该函数；如果需要手动测试，可以给前门模块添加触发按钮。

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