How to initiate an action after 3 mouse clicks

Question

I am new to writing code but I'm trying to figure out to have a div disappear after being clicked three times. I know how to get it to disappear after one or two clicks but I'm not sure how to do it after three. I wrote a while loop that should iterate up once after each click but instead the function doesn't wait for the div to be clicked and goes ahead and fades out the div.

var threeClick = function() {
    var n = 0;
    while(n > 2) {
        $(document).ready(function() {
            $('div').click(function(){
                n++;
            });
        });
        $(document).ready(function(){
            $('div').fadeOut('slow');
        });
    }
}
threeClick();

Answer 1

var n
$(document).ready(function()
{
    n=0;
    $('div').click(function()
    {
        n++;
        if(n==3)
        {
            n=0;
            $('div').fadeOut('slow');
        }   
    });
}

Answer 2

This should work:

$(document).ready(function() {
    var n = 0;
    $('div').click(function() {
        n++;

        if(n == 3) {
           $('div').fadeOut('slow');
        }
    });
});

I'm wondering why your while loop doesn't block execution while it sits and spins. JavaScript is not multi-threaded; there is a single thread of execution and I would imagine that the while would block that thread. But aside from that it won't really work because you're never checking the value of n before you fade out the div. This is why the fade-out happens almost immediately. There is also no need for numerous $(document).ready(...) calls; one will do.

I would also recommend using .on :

$(document).ready(function() {
    var n = 0;
    $('div').on('click', function() {
        n++;

        if(n >= 3) {
           $('div').fadeOut('slow');
        }
    });
});

This works because the n which has been defined in the anonymous function (passed to .ready ) is available to the callback (closure) passed to .on or .click . Closures are lexically bound to the scope in which they are defined, which means that anything defined in the enclosed scope is available to the closure. So your n 's value will be updated and available to the closure.

Answer 3

$(document).ready(function() {
    var n = 0;
    $('div').click(function() {
        n++;
        if (n == 3) {
            $(this).fadeOut('slow');
        }
    });
});

see this

You don't have to repeat $(document).ready . This is a method (from jQuery) called when DOM is ready. So your code should go in this function;

Answer 4

You may try this too

$(function(){
    $('#myDiv').on('click', function(){
        var clicks = $(this).data('clicks') || 0;
        $(this).data('clicks', clicks+1);
        if($(this).data('clicks') >=3 ) $(this).fadeOut();
    });
});

DEMO.

Answer 5

You need to create the variable holding the count outside of the function or it will reset each time the function is called. Give the div a class name - here i have used 'divClassName'.

var numClicks = 0;

$(function() {

    $(document).on("click",".divClassName",function() {

        numClicks+=1;

        if (numClicks > 2) {

            $('div').fadeOut('slow');

        }   
    }

};

Answer 6

With jQuery you could do something like that

var counter=0;
$('div').on('click',function(){
           counter++; 
           if(counter==3)$('div').fadeOut();}
         );