How to decrement a counter if a button is clicked the second time

john Source

I have the following code,each time a button is clicked it adds it to a counter as shown bellow, what i am trying to achieve is that if the same button is clicked the second time it must decrement the counter, currently if i press a single button multiple times it adds to a counter,i only want it to add to a counter when its clicked on the first time,the second time its clicked it must decrement the counter,i am trying to click each button only once and if its clicked on the second time it must decrement the counter

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}



$('body').on('click', '.btn', function(e) {
  counter++;
  count();
});
.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

and suggestions?

javascriptjqueryhtmlcss

Answers

answered 6 months ago void #1

You can add some class to button to store the state about whether it should increase the counter or decrease it.

I am adding class increment to do this. See the code below...

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}



$('body').on('click', '.btn', function(e) {
  $(this).toggleClass("increment");
  
  if($(this).hasClass("increment"))
    counter++;
  else
    counter--;
    
  count();
});
.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

answered 6 months ago Rory McCrossan #2

The simplest way to achieve this is to toggle a class on the clicked buttons, then display the count of the number of buttons which have the given class. Also note that your HTML is invalid, as you cannot have a button element within an a element. Here's a working example:

$('body').on('click', '.btn', function(e) {
  $(this).toggleClass('active');
  $("#notify").html($('.btn.active').length);
});
.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}
.active { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <button class="btn">click me</button>
  <button class="btn">click me</button>
  <button class="btn">click me</button>
  <button class="btn">click me</button>
</div>

<span id="notify" class="notification"></span>

answered 6 months ago zeropublix #3

I've used a custom key _clickCount that is bound to the specific element that is clicked. With a simple modulu check % 2 you can check if it's clicked for the first or second time.

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}

$('body .btn').on('click', function(e) {
  if (this._clickCount) {
    this._clickCount++;
  } else {
    this._clickCount = 1;
  };
  
  if (this._clickCount % 2 == 0) {
    counter--;
  } else {
    counter++;
  }
  console.log(this._clickCount);
  count();
});
.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

Note:

You don't have to pass the button-class .btn as second parameter in on() because they are not added dynamically. You can just add them in the selector $('body .btn')

answered 6 months ago William KLEIN #4

I dont like the idea of using a class to do that. Class should be used only to apply style to an element. For this purpose, I'd use data, has showed below.

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}



$('body').on('click', '.btn', function(e) {
  $(this).data('increment',!$(this).data('increment'));
  
  if($(this).data('increment'))
    counter++;
  else
    counter--;
    
  count();
});
.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

answered 6 months ago Shree #5

You can add extra class and check for the class like this.

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}

$('body').on('click', '.btn', function(e) {
  if ($(this).hasClass('click')) {
    $(this).removeClass('click');
    counter--;
    count();
  } else {
    counter++;
    $(this).addClass('click');
    count();
  }
  //console.log(counter);
});
.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button  class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

comments powered by Disqus