Problem in shopping cart in javascript (ES6)

Question

0.00/5 (No votes)

See more:

I have a simple problem, the add to cart function isn't working as it should. When i click the delete button, it add something to the cart. But when i click the add to cart button, it doesn't output anything.

JavaScript

const products = [];
const carts = [];
const inputs = {
    productId: document.getElementById("productID"),
    desc: document.getElementById("product_desc"),
    qty: document.getElementById("quantity"),
    price: document.getElementById("price")
};
const productsTable = document.getElementById("products-table");
const cartsTable = document.getElementById("carts-table");
document.getElementById('btnAddProduct').onclick = addProduct;

function renderProductsTable(e) {
    // delete all entries
    [...productsTable.children].slice(1).forEach(entry => productsTable.removeChild(entry));
        for (product of products) {
            let tr = document.createElement('tr');
            tr.innerHTML = `<td>${ product.id }</td>
                            <td>${ product.desc }</td>
                            <td>${ product.qty }</td>
                            <td>${ product.price }</td>
                            <td>
                                <button id="${ product.id }">Delete</button>
                                <button id="${ product.id }">Add to Cart</button>
                            </td>`;

            productsTable.appendChild(tr);
            document.getElementById(product.id).addEventListener("click", removeProduct);
            document.getElementById(product.id).addEventListener("click", addCart);

            
        }

}
function renderCartsTable(e) {
    // delete all entries
    [...cartsTable.children].slice(1).forEach(entry => cartsTable.removeChild(entry));
        for (cart of carts) {
            let tr = document.createElement('tr');
            tr.innerHTML = `<td>${ product.id }</td>
                            <td>${ product.desc }</td>
                            <td>${ product.qty }</td>
                            <td>${ product.price }</td>
                             <td>${ product.price * product.qty }</td>
                            <td>
                                <button id="${ product.id }">Delete</button>
                            </td>`;
            cartsTable.appendChild(tr);
        }
         console.log(carts);
}
function addProduct() {
    const product = {
        id: inputs.productId.value,
        desc: inputs.desc.value,
        qty: Number(inputs.qty.value),
        price: Number(inputs.price.value)
    };
    if (product.id === '') {
        alert('Please enter a product id');
    return;
    }
        let existing = products.find(item => item.id === product.id);
            if (existing) {
                existing.qty += product.qty;
            } 
            else {
                products.push(product);
            }
            renderProductsTable();
            document.getElementById('order').reset();
    }
function removeProduct(product_id) {
    const index = products.findIndex(p => p.id === product_id);
    products.splice(index, 1);
    renderProductsTable();
}
function addCart(product_id) {
    const product = products.find(p => p.id === product_id);
    const cartItem = carts.find(c => c.product === product);
    if(cartItem) {
        cartItem.qty ++;
    }
    else {
            carts.push(product);
        }
        renderCartsTable();        
}

HTML

<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" class="resetbtn" value="Reset" />
    <input type="button" id="btnAddProduct" value="Add New Product" >
</form>
<table border="1|1" id="products-table">
    <tr>
        <th>Product ID</th>
        <th>Product Description</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Action</th>
    </tr>
</table>
<h2>Shopping Cart</h2>
<table border="1|1" id="carts-table">
    <tr>
        <th>Product ID</th>
        <th>Product Description</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total</th>
        <th>Action</th>
    </tr>
</table>
<br />
</body>
<script src="script.js"></script>

What I have tried:

I tried several steps on how to fix it but it seems it still doesn't work. Hope you can help. Thanks.

Posted 13-Jul-17 4:24am

James Min

Updated 13-Jul-17 5:25am

v2

Add a Solution

Comments

Andy Lanng 13-Jul-17 11:13am

Hi :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Answer 1 · 2017-07-13T05:25:00

Ok - the ids of your dynamic buttons are all the same. You can't do that. It causes loads of issues.

Try this script. It still has problems, but the id's are unique at least: