刷新页面后检测div更改javascript

时间:2018-09-07 14:53:29

标签: javascript html reload

我有一个页面,显示带有数字的表格。这些是我的伴侣在商店中看到的价格。此页面是专为他设计的。

价格经常变动。我在WordPress中输入价格。我创建了“自定义帖子类型”和一个简单的表格来输入这些数字。一个价格=一个自定义字段。字段数约为30。

效果很好。但是我需要检测价格变化。 我希望我的合作伙伴的网站清楚显示价格变化。

理想的情况是当具有新价格的DIV的颜色发生更改时,旁边会出现一个按钮以重置其颜色。 这样的机制将使您快速了解价格变化。 该页面每10秒刷新一次。

我了解JS的基础知识,但我不知道该怎么做。我怀疑您将需要使用SessionStorage。 谁能给我指示或粘贴指向类似解决方案的链接?


我有很多div,例如:

<div id="price1">[types field='price1'][/types]</div>

和JS:

setTimeout(function(){
   window.location.reload(1);
}, 10000);

var price1 = document.getElementById('price1').textContent;

sessionStorage.setItem("price1-box", "price1");

var handle_storage = function () {
        console.log('change in storage! new' + price1);
      };

window.addEventListener("storage", handle_storage, false);

1 个答案:

答案 0 :(得分:0)

我解决了。也许对其他人有用。

<div id="eur-k">123</div>


window.onload = function() {

    setTimeout(function(){
       window.location.reload(1);
    }, 30000);

    // define div to add or remove alert
    var eurkDiv = document.getElementById('eur-k');

    // store current content in a variable
    var eurk = eurkDiv.textContent;

    // compare local storage with current content to make alarm
    if (localStorage.getItem('eurkLoc') != eurk) {
        eurkDiv.classList.add("active");
        eurkDiv.innerHTML = eurk + "<button type=\"button\" class=\"potwierdzenie\" onclick=\"resetFunction()\">OK</button>";
    }

    function resetFunction() {
        eurkDiv.classList.remove("active");
        eurkDiv.textContent = eurk;
        localStorage.setItem('eurkLoc', eurk);
    };
};