如何获取随时间动态变化的 HTML span 值

Question

我有一个 DHT 传感器，我使用 mqtt 将数据发送到服务器。从那里我将数据显示到 a 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';

    }

}

然后你需要在你的span id上设置Javascript MutationObserveronchange ，因为它不适用于span。

然后你需要在 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});