Stopping a function after IF condition is reached

Question

I have a button that on each click, adds 1 to a variable. When this variable goes above 5, an alert is triggered. However, after this the trigger is still constantly activated. I have tried using == for the checks rather then > , but it does the same thing. Any ideas?

http://jsfiddle.net/1345qam8/

// Declare the variable
  var generic_counter = 0;
  // Log the variable
  console.log(generic_counter);    
  // When button is clicked, add 1 to the variable
  $(document).ready(function() {
    $(".generic").click(function(add_generic) {
      if (generic_counter > 5) {
        alert("You've been looking up a lot about GENERIC, maybe contact this group?")
      } else {
        generic_counter += 1;
        console.log(generic_counter);
      }
    });
  });

Why do you expect that something else should happen? At the time `generic_counter` is larger then `5` , the `generic_counter` does not change anymore, so it will be `generic_counter > 5` for every click. — t.niese, Feb 25 '15 at 10:26
Correct. As soon as `generic_counter==6`, it stops increasing (because of if/else), so remains at 6, and always triggers the alert. Same if you use `if(generic_counter==5)` : it will remain at 5 forever, not increasing to 6, so it will trigger the alert every time. — Jeremy Thille, Feb 25 '15 at 10:32
I'm not shire if I understand well, but I think you need a `generic_counter` reset after the `alert()`. In this way every 5 times buttons is clicked you get an alert. (I hope you need this) — RikyTres, Feb 25 '15 at 10:35
(Anyway if you start from 0 and check id counter is > 5 you need 6 click) maybe better a ´counter >= 5` — RikyTres, Feb 25 '15 at 10:37

Guffa · Accepted Answer · 2015-02-25T10:54:06.030

If you use == (or ===) for the comparison, and always increase the counter, the alert only comes at the sixth click.

Note: Declare the variable inside the ready event handler, it doesn't need to be a global variable.

// When button is clicked, add 1 to the variable
$(document).ready(function() {

  // Declare the variable
  var generic_counter = 0;
  // Log the variable
  console.log(generic_counter);    

  $(".generic").click(function() {
    generic_counter++;
    console.log(generic_counter);
    if (generic_counter == 6) {
      alert("You've been looking up a lot about GENERIC, maybe contact this group?");
    }
  });

});

You can also unregister the event handler using the off method once the altert has been shown, if you don't want to continue counting:

// When button is clicked, add 1 to the variable
$(document).ready(function() {

  // Declare the variable
  var generic_counter = 0;
  // Log the variable
  console.log(generic_counter);    

  $(".generic").click(function() {
    generic_counter++;
    console.log(generic_counter);
    if (generic_counter == 6) {
      alert("You've been looking up a lot about GENERIC, maybe contact this group?");
      $(".generic").off('click');
    }
  });

});

For a more generic solution you can make a plugin:

$.fn.clickUntil(cnt, message) {
  var elements = this;
  return this.click(function(){
    if (--cnt == 0) {
      alert(message);
      elements.off('click');
    }
  });
}

Then you can easily make messages for several elements. Example:

$(document).ready(function() {
  var items = [
    { selector: '.generic', name 'GENERIC' },
    { selector: '.super', name 'SuPeR' },
    { selector: '.mordor', name 'M0rd0r' }
  ];
  $.each(items, function(i, o){
    $(o.selector).clickUntil(6, 'You've been looking up a lot about ' + o.name + ', maybe contact this group?');
  });
});

score 1 · Answer 2 · answered Feb 25 '15 at 10:28

Make a generic alert object that you can trigger only once. This way you can make multiple generic messages with one method for each. Easier maintenance too, because you can store all the messages at a single spot instead of at different places in your code.

OneTimeAlert = function(theMessage) {
    this.display = theMessage;
    this.triggered = false;
}
OneTimeAlert.prototype.trigger = function() {
    if(!this.triggered) {
        window.alert(this.display);
        this.triggered = true;
    }
}
GenericAlert = new OneTimeAlert("You're certainly interested in GENERIC, maybe you would like to get in touch with BUDDIES");
var generic_counter = 0;
// Log the variable
console.log(generic_counter);    
// When button is clicked, add 1 to the variable
$(document).ready(function() {
  $(".generic").click(function(add_generic) {
   if (generic_counter > 5) {
      GenericAlert.trigger();
   } else {
     generic_counter += 1;
     console.log(generic_counter);
   }
 });
});

score 1 · Answer 3 · answered Feb 25 '15 at 10:36

You can add the .off function in the if statement.

 $(".generic").click(function(add_generic) {
      if (generic_counter >= 5) {
        alert("You've been looking up a lot about GENERIC, maybe contact this group?")
        $(".generic").off("click");
      } else {
        generic_counter += 1;
        console.log(generic_counter);
      }
    });

http://jsfiddle.net/1345qam8/3/

score 0 · Answer 4 · answered Feb 25 '15 at 10:26

0

Try adding $('.generic').off('click'); with your alert. Also try >= for your test if needed :)

See your edited fiddle here

answered Feb 25 '15 at 10:26

Robin Leboeuf

2,096
1
13
14

score 0 · Answer 5 · answered Feb 25 '15 at 10:28

You have to use one variable to check for that condition:

  // Declare the variable
  var generic_counter = 0;
  var reached = false;
  // Log the variable
  console.log(generic_counter);
  // When button is clicked, add 1 to the variable
  $(document).ready(function() {
    $(".generic").click(function(add_generic) {
      if (generic_counter > 5) {
          if ( !reached ) {
        alert("You've been looking up a lot about GENERIC, maybe contact this group?")
        reached = true;
          }
      } else {
        generic_counter += 1;
        console.log(generic_counter);
      }
    });
  });


// So we have the thing counting up to 6 clicks, and then saying "blah"
// However, this keeps happening afterwards, so what we need is..
// The function needs to STOP when it reaches over 5

http://jsfiddle.net/1345qam8/2/

He doesn't *have* to to use another variable to check for that condition. That is only one possible solution. — Guffa, Feb 25 '15 at 10:38
I agree with you partially. Because using another variable is good if we think do not modify a lot of things. Another method would be to use third condition. — Adil Aliyev, Feb 25 '15 at 10:41

Stopping a function after IF condition is reached

5 Answers5