CODEWITHSUNDEEP
javascriptjqueryhtml
Jake quin
Jake quin

Reputation: 742

How to increment a number inside <p> in html upon click

How do I increment a number in p tag in HTML upon click on a picture? The code that I have tried seems to be not working.

$(document).on("click", ".minusbutton", function() {
  $('.parquantity').html(parseInt($('.parquantity').html(), 10) + 1)
  alert('you clicked on button #');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amountCounter">
  <img class="minusbutton" src="/mcdb/Logos/minus.png" alt="minus">
  <div class="quantity">
    <p class="parquantity">1</p>
  </div>
  <img class="plusbutton" src="/mcdb/Logos/plus.png" alt="plus">
</div>

Upvotes: 1

Views: 1133

Answers (2)

Mohammad
Mohammad

Reputation: 21489

You can increase and decrease target number in one event listener. Also using .text( fucntion ) the code is simpler

$(document).on("click", ".minusbutton, .plusbutton", function() {
  var ele = $(this);
  $('.parquantity').text(function(i, t){
    return ele.is(".plusbutton") ? +t+1 : +t-1;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amountCounter">
  <img class="minusbutton" src="/mcdb/Logos/minus.png" alt="minus">
  <div class="quantity">
    <p class="parquantity">1</p>
  </div>
  <img class="plusbutton" src="/mcdb/Logos/plus.png" alt="plus">
</div>

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

First, attach the click event to both images then you could use text() instead of html() since you deal with the text value (you need no HTML tags).

You could use ++/-- to add/subtract one when you click :

$(document).on("click", ".plusbutton", function() {
  var parquantity = parseInt($('.parquantity').text(), 10);
  $('.parquantity').text(++parquantity);
});

$(document).on("click", ".minusbutton", function() {
  var parquantity = parseInt($('.parquantity').text(), 10) - 1;

  if (parquantity > 0) {
    $('.parquantity').text(parquantity);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amountCounter">
  <img class="minusbutton" src="/mcdb/Logos/minus.png" alt="minus">
  <div class="quantity">
    <p class="parquantity">1</p>
  </div>
  <img class="plusbutton" src="/mcdb/Logos/plus.png" alt="plus">
</div>

Upvotes: 5

Related Questions