如何获取随时间动态变化的 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;&nbsp; &nbsp; if (span_Text&nbsp; === "fault"){&nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('my_image').style.display = 'inline';&nbsp; &nbsp; }}然后你需要在你的span id上设置Javascript MutationObserveronchange ，因为它不适用于span。然后你需要在 DOM 改变时调用你的函数。var yourSpan = document.getElementById("fault");var observer = new MutationObserver(function(mutations) {&nbsp; mutations.forEach(function(mutation) {&nbsp; &nbsp; console.info('changed');&nbsp; &nbsp; functionName();&nbsp; });&nbsp; &nbsp;&nbsp;});&nbsp;var setting = { attributes: true, childList: true, characterData: true };&nbsp;observer.observe(yourSpan, setting);

Answer 2

使用MutationObserverfunction 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});