How to initiate an action after three clicks

I'm new to writing code, but I'm trying to figure out that a div will disappear after clicking three times. I know how to make it disappear after one or two clicks, but I'm not sure how to do it after three. I wrote a while loop, which should be repeated once after each click, but instead, the function does not wait for the div to be pressed, and continues to work and the div disappears.

var threeClick = function() { var n = 0; while(n > 2) { $(document).ready(function() { $('div').click(function(){ n++; }); }); $(document).ready(function(){ $('div').fadeOut('slow'); }); } } threeClick(); 
+4
source share
6 answers
 var n $(document).ready(function() { n=0; $('div').click(function() { n++; if(n==3) { n=0; $('div').fadeOut('slow'); } }); } 
+3
source

This should work:

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

I am wondering why your while not blocking execution while it is sitting and spinning. JavaScript is not multithreaded; there is one thread of execution, and I would suggest that while blocks this thread. But otherwise it will not work, because you never check the value of n before you disappear from the div. That is why extinction occurs almost immediately. Also, there is no need for multiple calls to $(document).ready(...) ; 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 n , which was defined in an anonymous function (passed in .ready ), is available for callback (closure) passed in .on or .click . Closures are lexically related to the area in which they are defined, which means that everything that is defined in the closed area is available for closure. That way your n value will be updated and available for closing.

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

see this

You do not need to repeat $(document).ready . This is a method (from jQuery) that is called when the DOM is ready. Thus, your code must enter this function;

+3
source

You can try it 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.

+2
source

You need to create a variable that holds the counter outside the function, or it will reset each time the function is called. Give div the class name - here I used the 'divClassName'.

 var numClicks = 0; $(function() { $(document).on("click",".divClassName",function() { numClicks+=1; if (numClicks > 2) { $('div').fadeOut('slow'); } } }; 
0
source

With jQuery you can do something like this

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

Source: https://habr.com/ru/post/1488973/


All Articles