如何根据其他div的innerHTML值在目标div中显示文本？脚本求助

嘿，我来帮你搞定这个状态显示的功能！看起来你想要实现的是：当bedtwostatus、livingstatus、kitchenstatus这几个div里的内容是"A"时，就把statustop的内容设为"Danger"，对吧？我先把你没写完的脚本补全，再给你一个更简洁易维护的优化版本。

基础补全版 #

先把你原来的逻辑收尾，同时加上边界处理（比如去除空格、默认状态）：

function showstatus() {
    // 获取所有需要检查的状态元素
    const inputBedTwo = document.getElementById("bedtwostatus");
    const inputLiving = document.getElementById("livingstatus");
    const inputKitchen = document.getElementById("kitchenstatus");
    // 提前获取要显示状态的元素，避免重复查询DOM
    const statusDisplay = document.getElementById("statustop");
    
    // 检查每个元素的内容，用trim()避免空格导致的误判
    if (inputBedTwo.innerHTML.trim() === "A") {
        statusDisplay.innerHTML = "Danger";
    } else if (inputLiving.innerHTML.trim() === "A") {
        statusDisplay.innerHTML = "Danger";
    } else if (inputKitchen.innerHTML.trim() === "A") {
        statusDisplay.innerHTML = "Danger";
    } else {
        // 当没有任何一个元素是"A"时，显示默认状态
        statusDisplay.innerHTML = "Normal";
    }
}

优化简洁版 #

上面的代码重复了很多相同的赋值操作，我们可以把需要检查的元素ID放进数组，用更高效的方式处理，以后要加更多房间的话，直接在数组里加ID就行，不用改判断逻辑：

function showstatus() {
    // 把需要检查的元素ID统一放在数组里，方便扩展
    const statusElementIds = ["bedtwostatus", "livingstatus", "kitchenstatus"];
    const statusDisplay = document.getElementById("statustop");
    
    // 用some()方法快速判断是否有任意一个元素符合条件
    const isDanger = statusElementIds.some(id => {
        const element = document.getElementById(id);
        // 先判断元素是否存在，避免页面上没有这个ID时报错
        return element && element.innerHTML.trim() === "A";
    });
    
    // 三元运算符简化赋值逻辑
    statusDisplay.innerHTML = isDanger ? "Danger" : "Normal";
}

额外的实用建议： #

• 触发时机：别忘了在合适的时机调用这个函数，比如页面加载完成时：

  // 页面加载完成后自动执行一次
  window.addEventListener('load', showstatus);
  

• 动态监听变化：如果这些状态div的内容是动态更新的（比如通过其他脚本修改），可以用MutationObserver来自动监听变化并更新状态：

  const observer = new MutationObserver(showstatus);
  statusElementIds.forEach(id => {
      const elem = document.getElementById(id);
      if (elem) {
          // 监听元素的内容变化
          observer.observe(elem, { childList: true, subtree: true });
      }
  });
  

这样只要任何一个状态div的内容发生变化，statustop的显示就会自动更新啦！

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