0

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 address bar

2
  • 1
    by what means are you changing the value of #count? Commented Sep 23, 2011 at 6:43
  • Instead of listen changes in DIV, is better to listen for stopping countdown in countdown script. Commented Sep 23, 2011 at 7:03

4 Answers 4

2

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.

Sign up to request clarification or add additional context in comments.

Comments

1

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);

1 Comment

It would be good to also cancel the timeout, else the code will keep poping up alerts every second (or maybe that was your intention...).
0

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.

Comments

0

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) {
   // ...
}

1 Comment

I've tried it, actually, but it freezes the page pretty soon.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.