CODEWITHSUNDEEP
javascriptjquery
Kody
Kody

Reputation: 762

Javascript Stop Function Error

I am having a horrible time trying to understand why my Javascript OnClick event is not stopping the execution of this function.

Here's what I have tried so far:

    var Enabled = "true";
$(document).ready(function(){
$(".ui-state-error").click(function () {
    $('.ui-state-error').css({'display':'block'});
    var Enabled = "false";
    });
}); 
$(function() {
    var $divs = $('div', '#containerAlert'),
        total = $divs.length,
        counter = 0,
        showDiv = function() {
        if (Enabled == "true") {
            $divs.stop().hide();
            $($divs[counter]).fadeIn('slow');
            counter = (counter + 1) % total;
            setTimeout(showDiv, 6000);
        }
        };
    $divs.hide();
    showDiv();
});

The idea is once the variable Enabled is set to false, (which it would be once .ui-state-error is clicked), then the block hiding and fading in div's will stop it's execution.

What am I doing wrong?

Upvotes: 0

Views: 92

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You are using var Enabled = "false" inside the click handler which means that you are creating a local variable called Enabled inside the click handler instead of updating the value of the global variable.

var Enabled = true;
$(document).ready(function () {
    $(".ui-state-error").click(function () {
        $('.ui-state-error').css({
            'display': 'block'
        });
        //when you use var here the a new local variable is created instead of changing the value of the global one
        Enabled = false;
    });
});
$(function () {
    var $divs = $('div', '#containerAlert'),
        total = $divs.length,
        counter = 0,
        showDiv = function () {
            if (Enabled) {
                $divs.stop().hide();
                $($divs[counter]).fadeIn('slow');
                counter = (counter + 1) % total;
                setTimeout(showDiv, 6000);
            }
        };
    $divs.hide();
    showDiv();
});

Upvotes: 1

Related Questions