如何获得随时间动态变化的 HTML 跨度值

Question

我有一个 DHT 传感器，我使用 mqtt 将数据发送到服务器。 从那里我将数据显示为span ，因此 span 值正在发生变化。

我想做的是：
当传感器停止工作时，它会在该span显示故障，我只想在故障时显示图像。

<span id="fault"></span>

我尝试使用 JS 来获取span然后显示图像但它不起作用

<img src="yellowled.png" alt="Girl in a jacket" width="60" height="60" id="my_image">
    
<script>
    document.getElementById('my_image').style.display = 'none';
    var span_Text = document.getElementById("fault").innerText;
    if (span_Text  === "fault"){
       document.getElementById('my_image').style.display = 'inline';
    }
</script>

Answer 1

如果您的跨度值在不刷新页面的情况下发生变化，则需要触发跨度值更改功能。

为此，您需要使功能：

function functionName(){
var span_Text = document.getElementById("fault").innerText;
    if (span_Text  === "fault"){
       document.getElementById('my_image').style.display = 'inline';
    }
}

然后您需要在您的跨度 ID 上设置 Javascript MutationObserver ，因为onchange不适用于跨度。

然后您需要在 DOM 更改时调用您的函数。

var yourSpan = document.getElementById("fault");
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.info('changed');
    functionName();
  });    
});
 
var setting = { attributes: true, childList: true, characterData: true };
 
observer.observe(yourSpan, setting);

Answer 2

使用MutationObserver

function callback (event) {
    // inspect event or event.target.textContent and react
}
observer = new MutationObserver((events) => events.forEach(callback));
observer.observe(document.getElementById("fault"), {childList: true, subtree: true, characterData: true});