3

When you add product with the same Product Id it must increase its quantity and not be able to add a new row. I've tried the comments. Please check it below the js script. But it is still not working.

let Cart = [];


function viewCart() {

  let tr = document.createElement('tr');
  for (cart of Cart) {
    tr.innerHTML = `<td>${ cart.id }</td>
                      <td>${ cart.desc }</td>
                      <td>${ cart.qty }</td>
                      <td>${ cart.price }</td>
                      <td>${ cart.qty * cart.price }</td>`;

  }
  cartsTable.appendChild(tr);
}

function AddtoCart(productid, description, quantity, price) {
  let inputs = {
    id: productid,
    desc: description,
    qty: quantity,
    price: price
  };
  Cart.push(inputs);
  viewCart()
}
<script src="script.js"></script>

<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 100000)" />
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 2, 20000)" />
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 40000)" />

<table border="1|1" id="cartsTable">
  <tr>
    <th>Product ID</th>
    <th>Product Description</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Total</th>
  </tr>
</table>

6
  • An upvote on my answer would be appreciated :)
    – Erazihel
    Jul 14, 2017 at 13:14
  • I already upvoted. Thank you Erazihel
    – Joseph
    Jul 14, 2017 at 13:15
  • You accepted the answer, but not upvoted. Anyway, I'm glad I could help.
    – Erazihel
    Jul 14, 2017 at 13:17
  • It says that it recorded my upvote but my reputation is below 15 so it wasn't displayed in public. That's what stackoverflow says
    – Joseph
    Jul 14, 2017 at 13:19
  • Ok, sorry about that :)
    – Erazihel
    Jul 14, 2017 at 13:20

1 Answer 1

1

I'd recommend you to use an object instead of an array to use the productid as key.

const cart = {};

function AddtoCart(productid, description, quantity, price) {
  if (cart[productid]) {
    cart[productid].qty += quantity;
  } else {
    cart[productid] = {
      id: productid,
      desc: description,
      qty: quantity,
      price: price
    };
  }
  
  viewCart(cart);
}

function viewCart() {
  let tbody = document.getElementById('cartsBody');
  tbody.innerHTML = '';
  Object.values(cart).forEach(content => {
    tbody.innerHTML += `<td>${ content.id }</td>
                      <td>${ content.desc }</td>
                      <td>${ content.qty }</td>
                      <td>${ content.price }</td>
                      <td>${ content.qty * content.price }</td>`;

  });
}
<script src="script.js"></script>

<input type="button" value="Laptop" onclick="AddtoCart('132','Macbook Pro', 1, 100000)" />
<input type="button" value="Phone" onclick="AddtoCart('456','Iphone 5S', 2, 20000)" />
<input type="button" value="Camera" onclick="AddtoCart('789','Nikon 3D00', 1, 40000)" />

<table border="1|1" id="cartsTable">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Description</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="cartsBody">
  </tbody>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.