Nose porque me salta undefined en la consola. Copie literalmente lo mismo de otro carrito pero cuando hago el evento de clickear, me salta undefined. Probablemente sea algo muy tonto que no puedo sacar pero cuando clickeo, me salta el error. Yo hice dos carritos, copie literalmente lo mismo del otro cambiando la estructura del DOM pero me salta ese problema.
let stockconsolas =[
{
id: 10, nombre: "Control Playstation 4", precio: 17000, desc:"Completamente nuevo para jugar con la consola de Playstation 4", desc2:"Colores negro o blanco", desc3:"Viene con cargador", img: "./assets/control-ps4.jpg"
},
{
id:11, nombre: "Playstation 4 ", precio: 180000, desc:"La consola más famosa de la historia del gaming nunca puede faltar", desc2: "Viene con un control", desc3:"Viene con el Uncharted 4", img: "./assets/D_NQ_NP_649238-MLA47385331667_092021-V.jpg"
},
{
id:12, nombre: "Nintendo Switch", precio: 220000, desc:"Una consola para bolsillo y para llevar a todos lados contigo", desc2:"Viene con todos sus cargadores", desc3:"Viene con los dos joysticks", img: "./assets/consola-nintendo-switch-neon-v11.jpg"
},
{
id: 13, nombre: "Control Xbox One", precio: 17000, desc: "Completamente nuevo para jugar a la Xbox One con amigos", desc2: "Colores negro o blanco", desc3:"Viene con cargador", img: "./assets/control XBOX one.webp"
},
{
id: 14, nombre:"Xbox One", precio: 210000, desc:"Otro tipo de consola igual de divertida que la PS4 pero más nueva", desc2: "Viene con un control", desc3: "Colores negro o blanco", img: "./assets/xbox-one.jpg"
},
{
id: 15, nombre: "Consola Arcade", precio: 300000, desc:"La mejor consola para revivir los 80S y 90S. Incluye juegos modernos también", desc2:"Viene con 5000 juegos", desc3:"El diseño se decide en la tienda", img: "./assets/pandora-box.jpg"
}
]
let carrito2 = []
const tiendadeconsolas = document.getElementById("tiendadecontroles")
stockconsolas.forEach((prod) => {
const { id, nombre, precio, desc, desc2,desc3,img} = prod
const div = document.createElement("div")
div.innerHTML = `
<div class="producto">
<div class="card border-info mb-3" style="width: 18rem;">
<img src="${img}" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">${nombre}</h5>
<p class="card-text">${desc}</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">${desc2}</li>
<li class="list-group-item">${desc3}</li>
<li class="list-group-item"><strong>$${precio}</strong></li>
</ul>
<div class="card-body">
<button class="btn btn-secondary" id="agregar${id}">Agregar al carrito</button>
</div>
</div>
`
tiendadeconsolas.appendChild(div)
const boton1 = document.getElementById(`agregar${id}`)
boton1.addEventListener("click", () => {
agregaralcarrito1(id)
})
})
const agregaralcarrito1 = (id) =>{
const item2 = stockproductos.find((prod) => prod.id === id)
carrito2.push(item2)
console.log(item2)
}
item2
no serástockconsolas.find(...)
?...stockproductos.find
si nostockconsolas.find
, estas buscando en algo que no existe.