javascript - I am currently building a shopping site in Html & Js for an project, but there seems to be an error with my

If I add an item to my cart (set the quantity above 0), I have this weird errror where only the first object is having an image and the others don´t. I dont know how to fix this and where my error was.

Short description of what I did: At first I coded both functions, I added the first object to cart, everything worked, but as soon I added a second item only the first one had an Image, but I wanted both to have one. I tried rewriting the cart_loader(); but that didn´t work. I tried loading another Image, it didn´t work and I tried to find the error with printing everything out in the debug console.

let cart = [
    {id: 1, name:"Ryzen 7 7800X3D", price:455, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 2, name:"r9_9900X", price:470, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 3, name:"r9_9800X3D", price:760, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 4, name:"r5_7500f", price:122, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 5, name:"rx_7900XTX", price:910, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 6, name:"Herr Dreier", price:69420, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 7, name:"rx_7700XT", price:540, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 8, name:"r7_7800X3D", price:455, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
];

function addCartItem(img, Names, price, id) {
  cartList = document.querySelector("#cart ul");
  li = document.createElement("li");
  li.innerHTML = `
    <div class="item" id="${price}">
     <img src="${img}" alt="">
    <p id="1me">${Names}</p>
    <label for="Quantity">Quantity</label>
    <select name="Quantity" id="${id}" onchange="update_quantity(this.value, ${id})">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <p>${price}</p>
    <button type="button" onclick="remove_item();"><i class="fa-solid fa-xmark"></i></button>
    </div>
`;
  cartList.appendChild(li);
};

function cart_loader() {
  load_cart();
  x = 0;
  while (x < cart.length) {
    price_calc(x);
    if (cart[x].quantity >= 1) {
      addCartItem(cart[x].img, cart[x].name, cart[x].finalprice + "€", cart[x].id)
    };
    x++;
  };
  total_price();
};
cart_loader();

If I add an item to my cart (set the quantity above 0), I have this weird errror where only the first object is having an image and the others don´t. I dont know how to fix this and where my error was.

Short description of what I did: At first I coded both functions, I added the first object to cart, everything worked, but as soon I added a second item only the first one had an Image, but I wanted both to have one. I tried rewriting the cart_loader(); but that didn´t work. I tried loading another Image, it didn´t work and I tried to find the error with printing everything out in the debug console.

let cart = [
    {id: 1, name:"Ryzen 7 7800X3D", price:455, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 2, name:"r9_9900X", price:470, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 3, name:"r9_9800X3D", price:760, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 4, name:"r5_7500f", price:122, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 5, name:"rx_7900XTX", price:910, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 6, name:"Herr Dreier", price:69420, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 7, name:"rx_7700XT", price:540, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
    {id: 8, name:"r7_7800X3D", price:455, quantity:0, finalprice: 0, img:"graphics/r7x3d.png",},
];

function addCartItem(img, Names, price, id) {
  cartList = document.querySelector("#cart ul");
  li = document.createElement("li");
  li.innerHTML = `
    <div class="item" id="${price}">
     <img src="${img}" alt="">
    <p id="1me">${Names}</p>
    <label for="Quantity">Quantity</label>
    <select name="Quantity" id="${id}" onchange="update_quantity(this.value, ${id})">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    <p>${price}</p>
    <button type="button" onclick="remove_item();"><i class="fa-solid fa-xmark"></i></button>
    </div>
`;
  cartList.appendChild(li);
};

function cart_loader() {
  load_cart();
  x = 0;
  while (x < cart.length) {
    price_calc(x);
    if (cart[x].quantity >= 1) {
      addCartItem(cart[x].img, cart[x].name, cart[x].finalprice + "€", cart[x].id)
    };
    x++;
  };
  total_price();
};
cart_loader();

• javascript
• html

Share Improve this question Follow edited Jan 11 at 15:08 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jan 11 at 15:00 DerPhilovicDerPhilovic 111 bronze badge 1

• 3 The code is very error prone. 1. The price is ID, that does not make any sense. 2. you need to call addCartItem when you need to update the DOM – mplungjan Commented Jan 11 at 15:15

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Here are the possible corrections and improvements I would suggest you try

1. You are using a common ID in the paragraph tag which violated the unique id rule. Either change it to a class or use a unique on for each element like name-${id}.
2. I assume you have defined the onchange(), price_calc() and removeitem() method elsewhare in your program. Otherwise please do so.
3. Make sure that your HTML has an element with the ID cart and a child ul to hold the cart items. Additionally, ensure there is a #totalPrice element to display the total price. This should make your project work fine.