How do I display a div when my timer hits zero?

Question

here's my code:

$('#TESTER').hide();  
$('#titlehead2').click(
    function() {
        var doUpdate = function() {
            $('.countdown').each(function() {
                var count = parseInt($(this).html());
                if (count !== 0) {
                    $(this).html(count - 1);
                }
            });
        };
        setInterval(doUpdate,1000);
        if(count <= 0) $('#TESTER').show();
    }
);

#TESTER is the div I want to display when the timer reaches zero, and #titlehead2 is my play button for the timer. Any help will be much appreciated.

Answer 1

You need to check the value of counter within the timer

$('#TESTER').hide();
$('#titlehead2').click(function () {
    var doUpdate = function () {
        //need to look whether the looping is needed, if there are more than 1 countdown element then the timer logic need to be revisted
        $('.countdown').each(function () {
            var count = parseInt($(this).html());
            if (count !== 0) {
                $(this).html(count - 1);
            } else {
                $('#TESTER').show();
                //you also may want to stop the timer once it reaches 0
                clearInterval(timer);
            }
        });
    };
    var timer = setInterval(doUpdate, 1000);
});