created a function to change the price when the quantity is changes

DiksonIvySon · Oct 18, 2023 · a8d9dd3 · a8d9dd3
1 parent 6e6061c
commit a8d9dd3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/landingPage/script.js b/landingPage/script.js
@@ -5,6 +5,8 @@ let cartList = [];
 function cartItem(name, price, imageURL) {
     this.name = name;
     this.price = price;
+    this.quantity = 1;
+    this.quantity_price = price;
     this.imageURL = imageURL;
 }
 
@@ -47,10 +49,10 @@ function display_cartList() {
                                     </div>
                                     <div>
                                         <label for="qualities"><strong>Quality: </strong></label>
-                                        <input type="number" value="1">
+                                        <input type="number" value="${cartList[i].quantity}" id="${i}" onchange="handleQuantityChange(${i})">
                                     </div>
                                     <div>
-                                        <span><strong>PRICE: </strong>R${cartList[i].price}</span>
+                                        <span><strong>PRICE: </strong>R${cartList[i].quantity_price}</span>
                                     </div>
                                     <button role="button" class="remove-btn" onclick="deleteCartItem(${i})">REMOVE</button>
                                 </div>
@@ -65,3 +67,16 @@ function deleteCartItem(index) {
     cartList.splice(index, 1);
     display_cartList();
 }
+
+//function to change the price when the quantity 
+function handleQuantityChange(index) {
+    let quantity = document.getElementById(index).value;
+    let new_price = cartList[index].price * quantity;
+    cartList[0].quantity_price = new_price;
+
+    //also change the quantity in the dom
+    cartList[0].quantity = quantity;
+
+    //rerender the cartList display
+    display_cartList()
+}
diff --git a/landingPage/store.html b/landingPage/store.html
@@ -140,7 +140,7 @@ <h2>CART</h2>
                             </div>
                             <div>
                                 <label for="qualities"><strong>Quality: </strong></label>
-                                <input type="number" value="1">
+                                <input type="number" value="1" onchange="handleQuantityChange()">
                             </div>
                             <div>
                                 <span><strong>PRICE: </strong>R500</span>