仅限使用Javascript的购物车中的总计

Question

我需要帮助解决我的问题。这只是一个简单的问题，但我无法得到它。您需要做的就是计算表格下方购物车的总计。您只需要使用javascript，不允许使用jquery。希望你们能回答这个简单的问题。谢谢你们。

 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

您只需编辑renderCartTable功能

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;
}