jQuery - Increment number every second but onclick decrease

Question

So I am trying to increase a number every second. So far this works fine but I have an additional condition that doesn't really works and I don't know why.

What I want is that after the value hits 10 or more you can click on a div and something happens with that div but also the value decreases by 10. My Code:

 var counter = 0; var increment = 10; var div = document.getElementById('number'); var st = setInterval(function(){ div.innerHTML = ++counter; if (counter >= 10){ jQuery('#red-block').click(function(e) { jQuery(this).css('border-radius','15px'); counter = counter -10; }); } },1000); 

 #red-block { height: 40px; width: 40px; background-color: #ff0000; display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="number">1</div> <div id="red-block"></div> 

The problem is that after the counter hits 10 I click, the div changes but the value jumps for example to -17 and also I can click on the div as many times as I want and every times it decreases a big amount. This should only be possible each time the counter hits 10. Anybody has a solution for me what I am doing wrong? I believe it has something to do with setInterval

Answer 1

It happens because you are registering a new click event handler inside your setInterval functions. Move the click registration outside of the setInterval function.

var counter = 0;
var increment = 10;

jQuery('#red-block').click(function (e) {
    if (counter >= 10) {
        jQuery(this).css('border-radius', '15px');
        counter = counter - 10;
    }
});
var div = document.getElementById('number');
var st = setInterval(function () {
    div.innerHTML = ++counter;
}, 1000);

Answer 2

Separate this to your setInterval function and then put your if statement inside the click function

   jQuery('#red-block').click(function(e) {  
        if (counter >= 10){
            jQuery(this).css('border-radius','15px');
            counter = counter -10;
        }
   });

 var counter = 0; var increment = 10; var div = document.getElementById('number'); var st = setInterval(function(){ div.innerHTML = ++counter; },1000); jQuery('#red-block').click(function(e) { if (counter >= 10){ jQuery(this).css('border-radius','15px'); counter = counter -10; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="number">1</div> <div id="red-block">Click Me</div> 

Answer 3

The issues are:

1. You are registering your click event handler every time the timer function runs, so a single click will trigger the callback function many times. Just register it one time and within that callback, check to see if the count should be adjusted.
2. Even when decreasing the counter by 10, it still increases by one. Instead, just track the amount you are changing the count by ( 1 or -10 ) and update the output based on the current "change by" value.

Also, since you are using jQuery, go ahead and use it (you've already taken the plunge).

Also (FYI), don't use .innnerHTML when you aren't setting any HTML, use .textContent for that. And, since you are using jQuery, you can use .text() instead of .textContent .

 // Here's the jQuery way to get a reference to elements by their id's: var $div = $('#number'); var $block = $('#red-block') var counter = 1; // This will be the amount to change by var count = 0; // This will be the current count at any given time // Just set up the click event handler once, not every time the interval runs $block.on("click", function(e) { // But only do something if the count is right if (count >= 10){ $(this).css('border-radius','15px'); counter = -10; } }); var st = setInterval(function(){ // Now, just adjust the count by the counter count = count += counter; $div.text(count); // <-- The jQuery way to set the text of an element }, 1000); 

 #red-block { height: 40px; width: 40px; background-color: #ff0000; display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="number">1</div> <div id="red-block"></div>