Trouble updating specific item quantities in JavaScript array

Other Questions JavaScript
1

Hey everyone, I’m stuck on a problem with my shopping cart project. I’m trying to update item quantities, but it’s not working as expected.

When I change the quantity of any item other than the first one, it doesn’t update correctly. The local storage shows the right data, but the display doesn’t match up.

Here’s a simplified version of my code:

function updateQuantity(event) {
  const newQuantity = Number(event.target.value);
  const itemIndex = event.target.dataset.index;

  if (newQuantity === 0) {
    removeFromCart(itemIndex);
  } else {
    cart[itemIndex].quantity = newQuantity;
    saveCart();
    displayCart();
  }
}

const quantityInputs = document.querySelectorAll('.quantity-input');
quantityInputs.forEach(input => {
  input.addEventListener('change', updateQuantity);
});

The weird thing is, I can change the first item’s quantity just fine. But when I try to update any other item, it seems to use the first item’s value instead.

Has anyone run into something like this before? Any ideas on what I might be doing wrong? Thanks in advance for any help!

2

I’ve encountered a similar issue in my own projects. The problem likely stems from how you’re handling the item indices. When using querySelectorAll, the indices might not align with your cart array if items have been removed or rearranged.

A more robust approach is to use unique identifiers for each item instead of relying on array indices. You could assign each item a unique ID when adding it to the cart, then use that ID in your HTML and JavaScript.

For example:

function updateQuantity(event) {
  const newQuantity = Number(event.target.value);
  const itemId = event.target.dataset.itemId;

  const itemIndex = cart.findIndex(item => item.id === itemId);
  if (itemIndex !== -1) {
    if (newQuantity === 0) {
      removeFromCart(itemId);
    } else {
      cart[itemIndex].quantity = newQuantity;
      saveCart();
      displayCart();
    }
  }
}

This approach should resolve the mismatching issues you’re experiencing. Remember to update your HTML to use data-item-id instead of data-index. Hope this helps!

3

Your issue sounds like a classic case of event delegation gone awry. I’d wager the problem lies in how you’re assigning the ‘data-index’ attribute to your quantity inputs. If these aren’t updated correctly when items are added or removed, you’ll get the behavior you’re describing.

A quick fix might be to use the item’s position in the DOM instead of relying on a potentially stale index. Try this:

function updateQuantity(event) {
  const newQuantity = Number(event.target.value);
  const itemElement = event.target.closest('.cart-item');
  const itemIndex = Array.from(itemElement.parentNode.children).indexOf(itemElement);

  if (newQuantity === 0) {
    removeFromCart(itemIndex);
  } else {
    cart[itemIndex].quantity = newQuantity;
    saveCart();
    displayCart();
  }
}

This approach dynamically calculates the item’s index based on its position in the DOM, which should align with your cart array. Give it a shot and see if it resolves your issue.

4

hey there! sounds like a tricky situation. have u tried using a unique identifier for each item instead of relying on indices? maybe something like this:

function updateQuantity(event) {
  const newQuantity = Number(event.target.value);
  const itemId = event.target.dataset.itemId;
  const item = cart.find(i => i.id === itemId);
  if (item) {
    item.quantity = newQuantity;
    saveCart();
    displayCart();
  }
}

this might solve ur problem. good luck!