Warm tip: This article is reproduced from stackoverflow.com, please click
javascript

How to make so that changes concerned each item?

发布于 2020-03-27 10:31:08

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>
Questioner
karaname
Viewed
13
antonku 2019-07-03 23:48

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>