CODEWITHSUNDEEP
javascripthtmldomeventsonclick
Ansul
Ansul

Reputation: 420

Click event firing only once for increment function in JavaScript

The first if condition is working as desired multiple times but the second and third condition run only once. if the fa-plus-square element is clicked then the number increases only once and the minus element decrements only once. Why doesn't it increase further?

let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('quantity-input')) {
    input.value = 1;
  }
  if (e.target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value) + 1;
  }
  if (e.target.classList.contains('fa-minus-square')) {
    input.value = parseInt(input.value) - 1;
  }
});
<p class="quantity">
  <span class="quantity-text">Quantity </span><i class="far fa-minus-square quantity-icon">-</i>
  <input type="number" value="1" class="quantity-input" />
  <i class="far fa-plus-square quantity-icon">+</i>
</p>

Upvotes: 0

Views: 371

Answers (1)

Barmar
Barmar

Reputation: 781721

You need to check for the plus and minus buttons first, and use else if so you only test for not clicking on the input field if neither of those succeeds.

Otherwise, when you click on the plus or minus buttons, the !e.target.classList.contains('quantity-input') condition is true, so it sets the input back to 1 before adding or subtracting.

let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value) + 1;
  }
  else if (e.target.classList.contains('fa-minus-square')) {
    input.value = parseInt(input.value) - 1;
  }
  else if (!e.target.classList.contains('quantity-input')) {
    input.value = 1;
  }
});
<p class="quantity">
  <span class="quantity-text">Quantity </span><i class="far fa-minus-square quantity-icon">-</i>
  <input type="number" value="1" class="quantity-input" />
  <i class="far fa-plus-square quantity-icon">+</i>
</p>

Upvotes: 3

Related Questions