CODEWITHSUNDEEP
javascriptjqueryhtmlcss
john
john

Reputation: 109

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

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?

Upvotes: 0

Views: 661

Answers (5)

wilovent
wilovent

Reputation: 1364

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>

Upvotes: 2

4b0
4b0

Reputation: 22323

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>

Upvotes: 1

flx
flx

Reputation: 1578

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337627

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>

Upvotes: 3

void
void

Reputation: 36703

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>

Upvotes: 4

Related Questions