如何将其他商品添加到我的购物车？答案

【问题标题】：How do I add an additional item to my cart?如何将其他商品添加到我的购物车？
【发布时间】：2020-12-14 12:52:21
【问题描述】：

使用我当前的代码，我的本地存储中有我添加的项目，但它只显示我的购物篮中的一个

我不知道如何解决我的问题，你有什么想法吗？

function displayPanier(product) {
  
   function getTeddies() {
    let teddiesPanier = JSON.parse(localStorage.getItem("basketProducts"));
    return teddiesPanier; 
   }
   
   
   let teddiesPanier = getTeddies();

   //faire une boucle pour iterrer sur les produits dans le local storage

   function panierTeddies (){
     
   
       const panierStorage = document.getElementById("test")
       panierStorage.innerHTML = `
       <table class="table bg-light">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Photo</th>
            <th scope="col">Nom</th>
            <th scope="col">Prix</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td><img id=panierImg class="img-fluid" src="${teddiesPanier[0].imageUrl}"  style="max-width: 40px;"></td>
            <td><h5 class="font card-title">${teddiesPanier[0].name}</h5></td>
            <td><p class="card-text prix">${teddiesPanier[0].price / 100}€</p></td>
          </tr>
        </tbody>
      </table>
      <td><button onclick="removeProduct('${product}')" class="btn btn-primary">Supprimer</button></td>

   `
   }
   console.table(teddiesPanier)
   panierTeddies();
}

screenshhot basket with localstroage in console

【问题讨论】：

描述你的上下文，也尝试添加一些调试代码并显示控制台输出，告诉我们你尝试了什么......

标签： javascript local-storage innerhtml

【解决方案1】：

它只显示 (1) 项，因为您没有从 localStorage 遍历项目数组。例如${teddiesPanier[0].name}。

你可以把代码修改成这样：

  panierStorage.innerHTML = `
       <table class="table bg-light">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Photo</th>
            <th scope="col">Nom</th>
            <th scope="col">Prix</th>
          </tr>
        </thead>
        <tbody>`;

      for (var i=1; i < teddiesPanier.length; i++) {
panierStorage.innerHTML += `
            <tr>
              <th scope="row">${i}</th>
              <td><img id=panierImg class="img-fluid" src="${teddiesPanier[i].imageUrl}"  style="max-width: 40px;"></td>
              <td><h5 class="font card-title">${teddiesPanier[i].name}</h5></td>
              <td><p class="card-text prix">${teddiesPanier[i].price / 100}€</p></td>
            </tr>
            `;
      }

panierStorage.innerHTML += `<td><button onclick="removeProduct('${product}')" class="btn btn-primary">Supprimer</button></td></tbody>
      </table>`;

【讨论】：

你在第一个td标签中放了一个teddiesPanier[0]
@SylvainChaugny 谢谢我很难在stackoverflow上格式化我的f'in noob哈哈哈

【解决方案2】：

好吧，您只使用teddiesPanier[0]，它是数组的第一个元素，因此显然您不会显示其他项目（如果有的话）。你应该做一个循环来生成tr 范围或其他东西......

这正是你在评论中用漂亮的法语写的，应该完全用英文写，还有你所有的变量和函数名！

【讨论】：