It's not giving an error. The quantity is being changed only in the first product, even if when I press arrow of second product, the quantity of first product is being changed. cart.js
var changeQ = document.getElementsByClassName('increase')
for (i = 0; i < changeQ.length; i++) {
changeQ[i].addEventListener('click', function(){
var productId = this.dataset.product
var action = this.dataset.action
console.log('productId:', productId, 'Action:', action)
if (action == 'plus'){
Increase(productId, action)
}
else if(action=='minus'){
Decrease(productId, action)
}
})
}
function Increase(productId,action){
console.log('Increase')
var quantity = Number(document.getElementById("quantity").value);
quantity = quantity+1;
document.getElementById("quantity").value = quantity;
console.log(quantity);
}
function Decrease(productId,action){
var quantity = Number(document.getElementById("quantity").value);
console.log('Decrease')
quantity = quantity-1;
document.getElementById("quantity").value=quantity;
}
template
<div class="counter">
<div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
<div class="quantity"><input type="number" id="quantity" value="1"></div>
<div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>
It's in Django. So what can I do to indicate the specific product. Can someone help me to solve this problem, please!
Since you have used document.getElementById() in the Increase and Decrease functions it returns the first element with id='quantity' which is why you are only able to set the quantity for the first product.
So you need to use some value to distinguish between the input tags with id='quantity'. I would suggest adding data-product="{{ item.product.id }}" to the input tag since you are already passing the product id as productId to both the functions.
Thus your template would be some thing like this
<div class="counter">
<div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div>
<div class="quantity"><input type="number" id="quantity" value="1" data-product="{{item.product.id}}"></div>
<div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div>
</div>
And the Increase and Decrease functions would be modified like so
function Increase(productId,action){
console.log('Increase')
var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value);
quantity = quantity+1;
document.querySelector(`input[data-product=${productId}]`).value = quantity;
console.log(quantity);
}
function Decrease(productId,action){
var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value);
console.log('Decrease')
quantity = quantity-1;
document.querySelector(`input[data-product=${productId}]`).value=quantity;
}
document.querySelector() allows us to use CSS selectors to select elements. Here we use it to select input tags with the data-product attribute equal to the value in productId.${} is for string interpolation, we can use it to insert the productId into the selector string.