How to change multiple text box value from a specific button of each with same same class name in java script?

Question

I want to create an E-commerce cart where quantity increase or decrease with button, since cart have multiple items so multiple text box and button have same class name. For testing purpose I created 5 text boxes with buttons, one to increment and another one to decrease. When I click any button they only change

var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");

for (var i = 0; i <= 3; i++) {
  dec[i].addEventListener("click", Dec);
  inc[i].addEventListener("click", Inc);

  function Dec() {
    x[i].value -= 1;
  }

  function Inc() {
    x[i].value = +x[i].value + 1;
  }
}

user_519413 · Answer

Instead of accessing the elements by index in the loop, which can lead to closure issues, traverse the DOM in each click event to find the related input whose value should be changed. Try this:

var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");

for (var i = 0; i <= 1; i++) {
  dec[i].addEventListener("click", function() {
    this.nextElementSibling.value = parseInt(this.nextElementSibling.value, 10) - 1;
  });
  inc[i].addEventListener("click", function() {
    this.previousElementSibling.value = parseInt(this.previousElementSibling.value, 10) + 1;
  });
}

Here's the same thing in jQuery:

$('.dec_button').on('click', function() {
  $(this).next().val((i, v) => parseInt(v, 10) - 1)
});

$('.inc_button').on('click', function() {
  $(this).prev().val((i, v) => parseInt(v, 10) + 1)
});

How to change multiple text box value from a specific button of each with same same class name in java script?

1 Answers