Gesamtsumme In Einkaufswagen nur mit Javascript

Question

Ich brauche eine Hilfe in meinem Problem. Dies ist nur ein einfaches Problem, aber ich konnte es nicht bekommen. Alles, was Sie tun müssen, ist die Gesamtsumme des Einkaufswagens unter der Tabelle zu berechnen. Sie müssen nur Javascript verwenden, keine jquery ist erlaubt. Ich hoffe, ihr könnt auf dieses einfache Problem antworten. Danke Leute.

var products = []; 
 
     var cart = []; 
 

 
     function addProduct() { 
 
      var productID = document.getElementById("productID").value; 
 
      var product_desc = document.getElementById("product_desc").value; 
 
      var qty = document.getElementById("quantity").value; 
 
      var price = document.getElementById("price").value; 
 

 
      var newProduct = { 
 
       product_id: null, 
 
       product_desc: null, 
 
       product_qty: 0, 
 
       product_price: 0.00, 
 
      }; 
 
      newProduct.product_id = productID; 
 
      newProduct.product_desc = product_desc; 
 
      newProduct.product_qty = qty; 
 
      newProduct.product_price = price; 
 

 

 
      products.push(newProduct); 
 

 

 
      var html = "<table border='1|1' >"; 
 
      html += "<td>Product ID</td>"; 
 
      html += "<td>Product Description</td>"; 
 
      html += "<td>Quantity</td>"; 
 
      html += "<td>Price</td>"; 
 
      html += "<td>Action</td>"; 
 
      for (var i = 0; i < products.length; i++) { 
 
       html += "<tr>"; 
 
       html += "<td>" + products[i].product_id + "</td>"; 
 
       html += "<td>" + products[i].product_desc + "</td>"; 
 
       html += "<td>" + products[i].product_qty + "</td>"; 
 
       html += "<td>" + products[i].product_price + "</td>"; 
 
       html += "<td><button type='submit' onClick='deleteProduct(\"" + products[i].product_id + "\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\"" + products[i].product_id + "\", this);'/>Add to Cart</button></td>"; 
 
       html += "</tr>"; 
 
      } 
 
      html += "</table>"; 
 
      document.getElementById("demo").innerHTML = html; 
 

 
      document.getElementById("resetbtn").click() 
 
     } 
 
     function deleteProduct(product_id, e) { 
 
      e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode); 
 
      for (var i = 0; i < products.length; i++) { 
 
       if (products[i].product_id == product_id) { 
 
        // DO NOT CHANGE THE 1 HERE 
 
        products.splice(i, 1); 
 
       } 
 
      } 
 
     } 
 

 
     function addCart(product_id) { 
 

 

 
      //Indentify the product and add it to new "cart" array 
 
      for (var i = 0; i < products.length; i++) { 
 
       if (products[i].product_id == product_id) { 
 
        var cartItem = null; 
 
        for (var k = 0; k < cart.length; k++) { 
 
         if (cart[k].product.product_id == products[i].product_id) {//Already exists in cart, increment quantity. 
 
          cartItem = cart[k]; 
 
          cart[k].product_qty++;//Increment by one only, as requested. 
 
          break; 
 
         } 
 
        } 
 
        if (cartItem == null) { 
 
         //Every item in the cart specifies the product in question as well as how many of the product there is in the cart, starts off at product's quantity 
 
         var cartItem = { 
 
          product: products[i], 
 
          product_qty: products[i].product_qty // Start of at product's quantity 
 
         }; 
 
         cart.push(cartItem); 
 
        } 
 

 
        break 
 
       } 
 
      } 
 

 
      renderCartTable(); 
 

 
     } 
 

 
     function renderCartTable() { 
 
      var html = ''; 
 
      var ele = document.getElementById("demo2"); 
 
      ele.innerHTML = ''; //Start by clearng your table of old elements 
 

 
      html += "<table id='tblCart' border='1|1'>"; 
 
      html += "<tr><td>Product ID</td>"; 
 
      html += "<td>Product Description</td>"; 
 
      html += "<td>Quantity</td>"; 
 
      html += "<td>Price</td>"; 
 
      html += "<td>Total</td>"; 
 
      html += "<td>Action</td></tr>"; 
 
      for (var i = 0; i < cart.length; i++) { 
 
       html += "<tr>"; 
 
       html += "<td>" + cart[i].product.product_id + "</td>"; 
 
       html += "<td>" + cart[i].product.product_desc + "</td>"; 
 
       html += "<td>" + cart[i].product_qty + "</td>"; 
 
       html += "<td>" + cart[i].product.product_price + "</td>"; 
 
       html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "</td>"; 
 
       html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Quantity</button> &nbsp<button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Quantity</button></td>"; 
 
       html += "</tr>"; 
 
        
 
       var GrandTotal = parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty); 
 
       document.getElementById('demo3').innerHTML = GrandTotal; 
 
        
 
      } 
 
      html += "</table>"; 
 
      ele.innerHTML = html; 
 
     } 
 

 

 

 
     function subtractQuantity(product_id) 
 
     { 
 
      
 
      for (var i = 0; i < cart.length; i++) { 
 
       if (cart[i].product.product_id == product_id) { 
 
        cart[i].product_qty--;//decrement by one 
 
       } 
 

 
       if (cart[i].product_qty == 0) { 
 
        cart.splice(i,1);//Remove from cart 
 
       } 
 
       console.log("Products " + JSON.stringify(products)); 
 
      } 
 
      //Finally, re-render the cart table 
 
      renderCartTable(); 
 
     } 
 
     function addQuantity(product_id) 
 
     { 
 
      
 
      for (var i = 0; i < cart.length; i++) { 
 
       if (cart[i].product.product_id == product_id) { 
 
        cart[i].product_qty++;//decrement by one 
 
       } 
 
      } 
 
      //Finally, re-render the cart table 
 
      renderCartTable(); 
 
     }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Shopping Cart Pure Javascript</title> 
 
</head> 
 
<body> 
 
<form name="order" id="order"> 
 
    <table> 
 
     <tr> 
 
      <td> 
 
       <label for="productID">Product ID:</label> 
 
      </td> 
 
      <td> 
 
       <input id="productID" name="product" type="text" size="28" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="product">Product Desc:</label> 
 
      </td> 
 
      <td> 
 
       <input id="product_desc" name="product" type="text" size="28" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="quantity">Quantity:</label> 
 
      </td> 
 
      <td> 
 
       <input id="quantity" name="quantity" width="196px" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="price">Price:</label> 
 
      </td> 
 
      <td> 
 
       <input id="price" name="price" size="28" required/> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" /> 
 
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" > 
 
</form> 
 
<br> 
 
<p id="demo"></p> <br/> 
 
<h2> Shopping Cart </h2> 
 
<p id="demo2"></p> 
 
<p id="demo3"></p> 
 
</body> 
 
</html>

var products = []; 
 
     var cart = []; 
 

 
     function addProduct() { 
 
      var productID = document.getElementById("productID").value; 
 
      var product_desc = document.getElementById("product_desc").value; 
 
      var qty = document.getElementById("quantity").value; 
 
      var price = document.getElementById("price").value; 
 

 
      var newProduct = { 
 
       product_id: null, 
 
       product_desc: null, 
 
       product_qty: 0, 
 
       product_price: 0.00, 
 
      }; 
 
      newProduct.product_id = productID; 
 
      newProduct.product_desc = product_desc; 
 
      newProduct.product_qty = qty; 
 
      newProduct.product_price = price; 
 

 

 
      products.push(newProduct); 
 

 

 
      var html = "<table border='1|1' >"; 
 
      html += "<td>Product ID</td>"; 
 
      html += "<td>Product Description</td>"; 
 
      html += "<td>Quantity</td>"; 
 
      html += "<td>Price</td>"; 
 
      html += "<td>Action</td>"; 
 
      for (var i = 0; i < products.length; i++) { 
 
       html += "<tr>"; 
 
       html += "<td>" + products[i].product_id + "</td>"; 
 
       html += "<td>" + products[i].product_desc + "</td>"; 
 
       html += "<td>" + products[i].product_qty + "</td>"; 
 
       html += "<td>" + products[i].product_price + "</td>"; 
 
       html += "<td><button type='submit' onClick='deleteProduct(\"" + products[i].product_id + "\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\"" + products[i].product_id + "\", this);'/>Add to Cart</button></td>"; 
 
       html += "</tr>"; 
 
      } 
 
      html += "</table>"; 
 
      document.getElementById("demo").innerHTML = html; 
 

 
      document.getElementById("resetbtn").click() 
 
     } 
 
     function deleteProduct(product_id, e) { 
 
      e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode); 
 
      for (var i = 0; i < products.length; i++) { 
 
       if (products[i].product_id == product_id) { 
 
        // DO NOT CHANGE THE 1 HERE 
 
        products.splice(i, 1); 
 
       } 
 
      } 
 
     } 
 

 
     function addCart(product_id) { 
 

 

 
      //Indentify the product and add it to new "cart" array 
 
      for (var i = 0; i < products.length; i++) { 
 
       if (products[i].product_id == product_id) { 
 
        var cartItem = null; 
 
        for (var k = 0; k < cart.length; k++) { 
 
         if (cart[k].product.product_id == products[i].product_id) {//Already exists in cart, increment quantity. 
 
          cartItem = cart[k]; 
 
          cart[k].product_qty++;//Increment by one only, as requested. 
 
          break; 
 
         } 
 
        } 
 
        if (cartItem == null) { 
 
         //Every item in the cart specifies the product in question as well as how many of the product there is in the cart, starts off at product's quantity 
 
         var cartItem = { 
 
          product: products[i], 
 
          product_qty: products[i].product_qty // Start of at product's quantity 
 
         }; 
 
         cart.push(cartItem); 
 
        } 
 

 
        break 
 
       } 
 
      } 
 

 
      renderCartTable(); 
 

 
     } 
 

 
     function renderCartTable() { 
 
      var html = ''; 
 
      var ele = document.getElementById("demo2"); 
 
      ele.innerHTML = ''; //Start by clearng your table of old elements 
 

 
      html += "<table id='tblCart' border='1|1'>"; 
 
      html += "<tr><td>Product ID</td>"; 
 
      html += "<td>Product Description</td>"; 
 
      html += "<td>Quantity</td>"; 
 
      html += "<td>Price</td>"; 
 
      html += "<td>Total</td>"; 
 
      html += "<td>Action</td></tr>"; 
 
      for (var i = 0; i < cart.length; i++) { 
 
       html += "<tr>"; 
 
       html += "<td>" + cart[i].product.product_id + "</td>"; 
 
       html += "<td>" + cart[i].product.product_desc + "</td>"; 
 
       html += "<td>" + cart[i].product_qty + "</td>"; 
 
       html += "<td>" + cart[i].product.product_price + "</td>"; 
 
       html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "</td>"; 
 
       html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Quantity</button> &nbsp<button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Quantity</button></td>"; 
 
       html += "</tr>"; 
 
        
 
       var GrandTotal = parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty); 
 
       document.getElementById('demo3').innerHTML = GrandTotal; 
 
        
 
      } 
 
      html += "</table>"; 
 
      ele.innerHTML = html; 
 
     } 
 

 

 

 
     function subtractQuantity(product_id) 
 
     { 
 
      
 
      for (var i = 0; i < cart.length; i++) { 
 
       if (cart[i].product.product_id == product_id) { 
 
        cart[i].product_qty--;//decrement by one 
 
       } 
 

 
       if (cart[i].product_qty == 0) { 
 
        cart.splice(i,1);//Remove from cart 
 
       } 
 
       console.log("Products " + JSON.stringify(products)); 
 
      } 
 
      //Finally, re-render the cart table 
 
      renderCartTable(); 
 
     } 
 
     function addQuantity(product_id) 
 
     { 
 
      
 
      for (var i = 0; i < cart.length; i++) { 
 
       if (cart[i].product.product_id == product_id) { 
 
        cart[i].product_qty++;//decrement by one 
 
       } 
 
      } 
 
      //Finally, re-render the cart table 
 
      renderCartTable(); 
 
     }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Shopping Cart Pure Javascript</title> 
 
</head> 
 
<body> 
 
<form name="order" id="order"> 
 
    <table> 
 
     <tr> 
 
      <td> 
 
       <label for="productID">Product ID:</label> 
 
      </td> 
 
      <td> 
 
       <input id="productID" name="product" type="text" size="28" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="product">Product Desc:</label> 
 
      </td> 
 
      <td> 
 
       <input id="product_desc" name="product" type="text" size="28" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="quantity">Quantity:</label> 
 
      </td> 
 
      <td> 
 
       <input id="quantity" name="quantity" width="196px" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="price">Price:</label> 
 
      </td> 
 
      <td> 
 
       <input id="price" name="price" size="28" required/> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" /> 
 
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" > 
 
</form> 
 
<br> 
 
<p id="demo"></p> <br/> 
 
<h2> Shopping Cart </h2> 
 
<p id="demo2"></p> 
 
<p id="demo3"></p> 
 
</body> 
 
</html>

Answer 1

Sie bearbeiten nur renderCartTable Funktion

function removeCart(index) { 
    cart.splice(index, 1); 
    renderCartTable(); 
} 

function renderCartTable() { 
    var html = ''; 
    var ele = document.getElementById("demo2"); 
    ele.innerHTML = ''; //Start by clearng your table of old elements 

    html += "<table id='tblCart' border='1|1'>"; 
    html += "<tr><td>Product ID</td>"; 
    html += "<td>Product Description</td>"; 
    html += "<td>Quantity</td>"; 
    html += "<td>Price</td>"; 
    html += "<td>Total</td>"; 
    html += "<td>Action</td></tr>"; 
    var GrandTotal = 0; 
    for (var i = 0; i < cart.length; i++) { 
     html += "<tr>"; 
     html += "<td>" + cart[i].product.product_id + "</td>"; 
     html += "<td>" + cart[i].product.product_desc + "</td>"; 
     html += "<td>" + cart[i].product_qty + "</td>"; 
     html += "<td>" + cart[i].product.product_price + "</td>"; 
     html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "</td>"; 
     html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Quantity</button> &nbsp<button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/>Add Quantity</button>&nbsp<button type='submit' onClick='removeCart(\"" + i + "\", this);'/>Remove</button></td>"; 
     html += "</tr>"; 

     GrandTotal += parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty);    

    } 
    document.getElementById('demo3').innerHTML = GrandTotal; 
    html += "</table>"; 
    ele.innerHTML = html; 
}