Home How to decrement a counter if a button is clicked the second time
Reply: 5

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

john
1#
john Published in 2018-02-14 09:58:32Z

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?

void
2#
void Reply to 2018-02-14 10:01:58Z

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>

Rory McCrossan
3#
Rory McCrossan Reply to 2018-02-14 10:02:13Z

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>

zeropublix
4#
zeropublix Reply to 2018-02-14 10:07:02Z

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

William KLEIN
5#
William KLEIN Reply to 2018-02-14 13:18:09Z

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>

Shree Khanal
6#
Shree Khanal Reply to 2018-02-14 10:09:24Z

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>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.354824 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO