'how to use a 'change' event on a 'number' input to change the quantity of a product in a cart page in local storage and also in the DOM with Js?
Please can you help me? I am doing an exercise on the creation of a dynamic e-commerce site (API and JavaScript) and I am stuck on my shopping cart page which must give the customer the possibility to change the quantity of his products which all have different id. The products arrive in the shopping cart with a quantity already defined by the customer in the product page. Here is the corresponding HTML code and the Javascript code I tried to write.
<article class="cart__item" data-id="{product-ID}" data-color="{product-color}">
<div class="cart__item__img">
<img src="../images/product01.jpg" alt="Photographie d'un canapé">
</div>
<div class="cart__item__content">
<div class="cart__item__content__description">
<h2>Nom du produit</h2>
<p>Vert</p>
<p>42,00 €</p>
</div>
<div class="cart__item__content__settings">
<div class="cart__item__content__settings__quantity">
<p>Qté : </p>
<input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="42">
</div>
<div class="cart__item__content__settings__delete">
<p class="deleteItem">Supprimer</p>
</div>
</div>
</div>
</article>
<script>
input.addEventListener('change', modifyQty)
function modifyQty(){
article = document.querySelectorAll(".cart__item")
console.log(article)
for (var i = 0; i < takeStorage.length; i++){
if (takeStorage[i]._id == dataset.id && takeStorage[i].color == dataset.color) {
return takeStorage[i].quantity = input.value,
input.value = input.value
localStorage.setItem('kanap', JSON.stringify(takeStorage)),
takeStorage = JSON.parse(localStorage.getItem('kanap')),
console.log(takeStorage)
}
}
console.log("Hello World")
}
</script>
The article tag contains a data-id and a data-color corresponding to the id and color of each selected product. I thought of using this to specify the product whose quantity should be increased but I can't.
I'm a beginner in web development. Please help me
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
