Imetching Artículos Image, nombre, Precio, Acerca de API I Fetcheded Cada artículo y lo agregó en la etiqueta HTML El problema cuando presiono Agregar al carrito Botón Nada Agregar

Intenté la función OnClick en el botón y llamé al artículo por ID

Página html


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


            </div>

Archivo js


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);

});
});
}

0
Ali Alsaggaf 14 jul. 2019 a las 21:36

1 respuesta

La mejor respuesta

Tienes que pasar la identificación, Botón Haga clic en Handler como en el código inferior.

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

Aquí hay una pluma de trabajo. https://codepen.io/anon/pen/jjojvm

Soy ID de captura del elemento Haz click en la función AddToCart. Usando esa ID, puede mantener un carrito en la misma página o puede hacerlo a una página diferente que pasa la misma ID en la URL, dependiendo de su requisito.

1
Ajay Varghese 16 jul. 2019 a las 17:44