如何从api查看项目并将项目添加到购物车

Question

im fetching items image , name ,price ,about from API i fetched each item and added it in html tag the problem when i press add to cart button nothing adding

i tried onclick function on the button and call item by id

html page

     <div id="api-1" class="images full">


            </div>

js file

window.onload = function(){
 const name = document.getElementById('api-1');
 const tableItems = document.getElementById('item');
 const cartContent = document.getElementsByClassName('table-cart');




 fetch('https://us-central1-guitar-chord-de94e.cloudfunctions.net/products')
.then(response => response.json())
.then(items => { 
    let html = '';
    items.forEach(item =>{
      // console.log(item.items.name)

      html += `
      <div class="container">
      <img src=${item.items.image} class="item">

      <div class="overlay">
        <p style="color:white">${item.items.name}</p>
        <p style="color: white;font-weight: bold;font-size: 17px">price: ${item.items.price}</p>
        <div style="margin-top:60px;">
      <button  onclick="addToCart()"  style="background-color: gold;margin:0%;">add <img width="16px" src="./image/icons/shopping-cart.png" alt=""></button>
      </div>
    </div>

    </div> 

      `;
      name.innerHTML= html;
    })
});



}


function addToCart(){
  fetch('https://us-central1-guitar-chord-de94e.cloudfunctions.net/products')
.then(response => response.json())
.then(sys => { 

    sys.forEach(item =>{ console.log(item.sys);

});
});
}

Answer 1

You have to pass the id, button click handler like in below code.

<button onclick="addToCart(${item.sys.id})" style="background-color: gold;margin:0%;"></button>

Here's a working pen. https://codepen.io/anon/pen/jjojVm

I am capturing id of the clicked item in addToCart function. Using that id, you can maintain a cart in the same page or you can goto to different page passing the same id in URL depending on your requirement.