estoy tratando de hacer un carrito de compras y estoy teniendo problemas al pintar los productos
me aparece el siguiente error:
script.js:50 Uncaught TypeError: Cannot set properties of null(setting 'textContent').
que justo están en la parte de esta función que menciono.
de todos modos nose si lo estoy haciendo correctamente (nose si esta es la forma para pintar los productos). pero me econtre con este error y nose como solucionarlo.
este es mi codigo js:
const objetos = [
{
precio: 2000,
id: 1,
title: "Torta de sandia",
url: "https://picsum.photos/id/0/600"
},
{
precio: 300,
id: 2,
title: "Pizza",
url: "https://picsum.photos/id/10/600"
},
{
precio: 100,
id: 3,
title: "Agua",
url: "https://picsum.photos/id/20/600"
},
{
precio: 50,
id: 4,
title: "Sandía",
thumbnailUrl: "https://picsum.photos/id/30/600"
},
{
precio: 10,
id: 5,
title: "Mango",
thumbnailUrl: "https://picsum.photos/id/40/600"
},
{
precio: 150,
id: 6,
title: "Chela",
thumbnailUrl: "https://picsum.photos/id/50/600"
}
]
const items = document.getElementById("items")
const templateCard = document.getElementById('template-card')
const fragment = document.createDocumentFragment()
const pintarCards = objetos => {
console.log(objetos)
objetos.forEach(producto => {
templateCard.querySelector('h5').textContent = producto.precio
templateCard.querySelector('p').textContent = producto.precio
templateCard.querySelector('button').dataset.id = producto.id
templateCard.querySelector("img").setAttribute("src", producto.url)
const clone = templateCard.cloneNode(true)
fragment.appendChild(clone)
})
items.appendChild(fragment)
}
window.addEventListener('load', pintarCards(objetos))
y este es mi html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
<title>Carrito</title>
</head>
<body>
<div class="container">
<h1>Carrito</h1>
<hr>
<div id="items"> </div>
</div>
<template id="template-card">
<div class=>
<div class="card">
<img src="" alt="">
<div class="card-body">
<h5">Titulo</h5>
<p>precio</p>
<button class="btn btn-dark">Comprar</button>
</div>
</div>
</div>
</template>
<script src="script.js"></script>
</body>
</html>
template
y puede ser nulo todavía cuando eso pasa. Lo otro: yo haría un clone del template para trabajarlo (se me ocurre al leer la documentación )