CODEWITHSUNDEEP
javascript
user9690594
user9690594

Reputation:

Javascript implementation of arrows in input number - How to make so that changes concerned each item?

I have a basket of goods in which there can be many different entities. And I'm trying to implement changes in the number of goods using input - number without arrows, and with additional buttons +/-. I know that I could use identifiers and easily make my plans. But in my case, I need to use querySelectorAll. Help me please correct this code. quantity-arrow-minus decreases the field value and quantity-arrow-plus increases. How to make it so that the changes are concerned with each item?

var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');

minus.forEach(function(node) {
node.addEventListener('click', function() {
    update_cart.forEach(function(element) {
        element.value = parseInt(element.value) - 1;
    });
});
});

plus.forEach(function(node) {
node.addEventListener('click', function() {
    update_cart.forEach(function(element) {
        element.value = parseInt(element.value) + 1;
    });
});
});
<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>

<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>

Upvotes: 0

Views: 590

Answers (2)

weegee
weegee

Reputation: 3409

Use Number() instead. Assuming that the minus button will be just after your input, just use this.nextElementSibling. This is will make your code better instead of doing forEach on every element. What if there are many elements like these? 

var minus = document.querySelectorAll('.quantity-arrow-minus');
var plus = document.querySelectorAll('.quantity-arrow-plus');

minus.forEach((node) => {
   node.onclick = function () {
       this.nextElementSibling.value = Number(this.nextElementSibling.value) - 1;
   }
});

plus.forEach((node) => {
    node.onclick = function () {
       this.previousElementSibling.value =Number(this.previousElementSibling.value) + 1;
   }
});
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>

Upvotes: 0

antonku
antonku

Reputation: 7675

You can use previousElementSibling and nextElementSibling to access the input that corresponds to the button that was clicked:

var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');

minus.forEach(function(node) {
    node.addEventListener('click', function(e) {
       const input = e.target.nextElementSibling
       input.value = parseInt(input.value) - 1;
    });
});

plus.forEach(function(node) {
    node.addEventListener('click', function(e) {
       const input = e.target.previousElementSibling
       input.value = parseInt(input.value) + 1;
    });
});
<form action="{% url 'cart:cart_update' %}" method="GET">
    <button type="button" class="quantity-arrow-minus">-</button>
    <input type="number" class="update_cart" value="0">
    <button type="button" class="quantity-arrow-plus">+</button>
    <br>
    <button type="button" class="quantity-arrow-minus">-</button>
    <input type="number" class="update_cart" value="0">
    <button type="button" class="quantity-arrow-plus">+</button>
</form>

Upvotes: 1

Related Questions