How to use javascript to monitor a change in a div value?

I have a page with a countdown in a DIV with id ="count"

I would like to monitor this div value so, when it reaches 0, a alert pops up.

I've gono so far as

if(parseInt(document.getElementById('count').innerHTML) < 2){}

But I don't know how to "listen" for the div changes

Can anyone help me?

Btw: it needs to be in pure javascript, with no such things as jquery.

Update:

I have no say so in the original code. It's an external page and I'm trying to run this code at the a开发者_运维知识库ddress bar

Presumably you have a function running based on setInterval or setTimeout. Have that function call your function when it gets to zero.

If you can't do that, you can try optimised polling - use setInterval to read the value, estimate when it might be near zero, check again and estimate when it might be zero, etc. When it is zero, do your thing.

There are DOM mutation events, but they are deprecated and were never well or widely supported anyway. Also, they are called when content changes so probably too often for your scenario anyway.

If you are changing the value of #count yourself then call the alert from that place. If not use:

window.setInterval(function(){
    if(parseInt(document.getElementById('count').innerHTML) < 2) alert('Alarm!');
},1000); // 1s interval

UPDATE To clear that interval:

var timer = window.setInterval(function(){
    if(parseInt(document.getElementById('count').innerHTML) < 2) {
       alert('Alarm!');
       window.clearInterval(timer);
    }
},1000); // 1s interval

//or by using non-anonymous function

function check(){
 if(parseInt(document.getElementById('count').innerHTML) < 2) {
     alert('Alarm!');
     window.clearInterval(timer);
 }
}

var timer = window.setInterval(check,1000);

The only efficient way to monitor this is to go to the code that is actually changing the div and modify it or hook it to call a function of yours whenever it updates the contents of the div. There is no universal notification mechanism for anytime the contents of div changes. You will have much more success looking into modifying the source of the change.

The only option I know of besides the source of the change would be using an interval timer to "poll" the contents of the div to notice when it has changed. But, this is enormously inefficient and will always have some of inherent delay in noticing the actual change. It's also bad for battery life (laptops or smartphones) as it runs continuously.

You don't listen for the div to change. The div is just there for a visual representation of the program's state.

Instead, inside whatever timing event is counting down the number, use a condition such as...

if (i < 2) {
   // ...
}