const Sheet = [ { "Code": "A-0-1", "UPC": "Photos/4009803054728.jpg", "Title": "USS Constitution", "Price": "$34", "InStock": "7" }, { "Code": "A-0-2", "UPC": "Photos/4009803073996.jpg", "Title": "Revell 07399 VW Samba Bus Model Kit", "Price": "$38", "InStock": "8" }, ] const productsEl = document.querySelector(".Sheet"); function getProducts() { Sheet.forEach((product) => { productsEl.innerHTML += `<div class="productContainer"> <div class="img"> <img src=${product.UPC} alt="Image Unavailable" height="170px;" width="170px"> </div> <div class="itemdesc"> <h2 class="itemName" id="itemName">${product.Title}</h2> <h4 class="price"><span id="price">${product.Price}</span></h4> <div class="desc"> <p id="desc">${product.Code}</p> </div> <div class="stock"> <p> ${product.InStock} Units</p> </div> <div class="addToCart" onclick="addToCart();"> <button id="addToCart" > Add to Cart</button> </div> </div>`; }) } getProducts(); function addToCart() { console.log(document.getElementById("itemName").innerText) } <div class="Sheet"> </div>De acuerdo, el botón Agregar al carrito solo registra los primeros datos en mi objeto. No importa cuál presione, siempre es el primero. Probé .val y no tuve suerte. ¿Cómo puedo registrar el elemento que se presionó en su lugar?
Puede pasar el nombre del producto como argumento a la función addToCart() como se muestra a continuación
const Sheet = [ { "Code": "A-0-1", "UPC": "Photos/4009803054728.jpg", "Title": "USS Constitution", "Price": "$34", "InStock": "7" }, { "Code": "A-0-2", "UPC": "Photos/4009803073996.jpg", "Title": "Revell 07399 VW Samba Bus Model Kit", "Price": "$38", "InStock": "8" }, ] const productsEl = document.querySelector(".Sheet"); function getProducts() { Sheet.forEach((product) => { productsEl.innerHTML += `<div class="productContainer"> <div class="img"> <img src=${product.UPC} alt="Image Unavailable" height="170px;" width="170px"> </div> <div class="itemdesc"> <h2 class="itemName" id="itemName">${product.Title}</h2> <h4 class="price"><span id="price">${product.Price}</span></h4> <div class="desc"> <p id="desc">${product.Code}</p> </div> <div class="stock"> <p> ${product.InStock} Units</p> </div> <div class="addToCart" onclick="addToCart(product.Title);"> <button id="addToCart" > Add to Cart</button> </div> </div>`; }) } getProducts(); function addToCart(productTitle) { console.log(productTitle) }Tienes que pasar el index del producto como parámetro a la función AddToCart() .
Ventajas de esta implementación
Price , InStock , etc.AddToCart , no la llamada a la acción AddToCart de AddToCart getProducts() . Consejo: debe intentar evitar obtener elementos a través de html id o innerText (esto era una norma hace una década o más, ya no). Intenta usar más atributos de datos
const Sheet = [ { "Code": "A-0-1", "UPC": "Photos/4009803054728.jpg", "Title": "USS Constitution", "Price": "$34", "InStock": "7" }, { "Code": "A-0-2", "UPC": "Photos/4009803073996.jpg", "Title": "Revell 07399 VW Samba Bus Model Kit", "Price": "$38", "InStock": "8" }, ] const productsEl = document.querySelector(".Sheet"); function getProducts() { Sheet.forEach((product, productIndex) => { productsEl.innerHTML += `<div class="productContainer"> <div class="img"> <img src=${product.UPC} alt="Image Unavailable" height="170px;" width="170px"> </div> <div class="itemdesc"> <h2 class="itemName" id="itemName">${product.Title}</h2> <h4 class="price"><span id="price">${product.Price}</span></h4> <div class="desc"> <p id="desc">${product.Code}</p> </div> <div class="stock"> <p> ${product.InStock} Units</p> </div> <div class="addToCart" onclick="addToCart(`+productIndex+`);"> <button id="addToCart" > Add to Cart</button> </div> </div>`; }) } getProducts(); function addToCart(productIndex) { var product = Sheet[productIndex]; console.log(product.Title); } <div class="Sheet"> </div>Explicación
Los parámetros de una función forEach permiten el índice de la iteración actual. leer más aquí
Prueba así
const Sheet = [ { "Code": "A-0-1", "UPC": "Photos/4009803054728.jpg", "Title": "USS Constitution", "Price": "$34", "InStock": "7" }, { "Code": "A-0-2", "UPC": "Photos/4009803073996.jpg", "Title": "Revell 07399 VW Samba Bus Model Kit", "Price": "$38", "InStock": "8" }, ] const productsEl = document.querySelector(".Sheet"); function getProducts() { Sheet.forEach((product) => { productsEl.innerHTML += `<div class="productContainer"> <div class="img"> <img src=${product.UPC} alt="Image Unavailable" height="170px;" width="170px"> </div> <div class="itemdesc" > <h2 class="itemName" id="itemName">${product.Title}</h2> <h4 class="price"><span id="price">${product.Price}</span></h4> <div class="desc"> <p id="desc">${product.Code}</p> </div> <div class="stock"> <p> ${product.InStock} Units</p> </div> <div class="addToCart" onclick=""> <button class="addToCartBtn" id="${product.Code}"> Add to Cart</button> </div> </div>`; }) } getProducts(); var elements = document.querySelectorAll(".addToCartBtn"); elements.forEach(element => { element.addEventListener("click", function (e) { console.log(e.target.id); //other function }); }); <div class="Sheet"> </div>