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

score 3 · Answer 1 · answered Jun 30 '13 at 17:22

3

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

answered Jun 30 '13 at 17:22

PaRoJa

303
3
13

Thanks for responding, I like how your's simple and clean. – michaelto20 Jun 30 '13 at 17:38

Vivin Paliath · Answer 2 · 2013-06-30T17:30:00.300

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.

Super helpful! Thanks for filling in the details, it really helped me understand how it all works together. — michaelto20, Jun 30 '13 at 17:37

score 3 · Answer 3 · answered Jun 30 '13 at 17:24

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;

answered Jun 30 '13 at 17:24

pbaris

4,525
5
37
61

Learn something new everyday. I've only done simple things on codeacademy and never came across where it talks about using '$(document.ready)'. Thanks for the input. – michaelto20 Jun 30 '13 at 17:40

score 2 · Answer 4 · answered Jun 30 '13 at 17:28

2

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.

answered Jun 30 '13 at 17:28

The Alpha

143,660
29
287
307

Thanks for showing another variation. Your's looks very compact but I think I understand it. – michaelto20 Jun 30 '13 at 17:41
You are Welcome and yes, since we can use `jQuery` then why not utilize it! :-) – The Alpha Jun 30 '13 at 17:42

score 0 · Answer 5 · answered Jun 30 '13 at 17:23

0

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

        }   
    }

};

answered Jun 30 '13 at 17:23

Thanks for the heads up about keeping the count outside the function. – michaelto20 Jun 30 '13 at 17:42

score 0 · Answer 6 · answered Jun 30 '13 at 17:24

0

With jQuery you could do something like that

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

answered Jun 30 '13 at 17:24

Developicus

152
1
1
12

How to initiate an action after 3 mouse clicks

6 Answers6