Hay un problema con esta parte de tu código HTML:
- Hay un problema con dos líneas de tu código plantilla:
<h5">Titulo</h5>
Al tener esas dobles comillas después de h5
y antes
<div class=>
Que puede dificultar o impedir que se procese el código dentro de cerrar la etiqueta, la expresiónella.
- Los objetos dentro de una plantilla HTML no existen en el documento. Se crean cuando ejecutas la línea
const clone = templateCard.querySelectorcloneNode('h5'true)
devuelve nulo, porque el objeto no existe, y al tratarEsa línea debe de obtenerestar antes de cualquier selección o inserción que hagas en la propiedadplantilla. De lo contrario, estás buscando objetos que no existen. Además le falta un textContentcontent
se genera ese error.
También tienes un problema en la línea Debe ser algo así:
<divconst class=>pintarCards = objetos => {
console.log(objetos);
objetos.forEach(producto => {
const clone = templateCard.content.cloneNode(true);
clone.querySelector('h5').textContent = producto.precio;
clone.querySelector('p').textContent = producto.precio;
clone.querySelector('button').dataset.id = producto.id;
clone.querySelector("img").setAttribute("src", producto.url);
fragment.appendChild(clone);
});
items.appendChild(fragment);
}
Nota también que igualmente1) la selección se hace quesobre el código no se procese bienobjeto clone
y 2) te hacen falta los punto y coma al final de las líneas (puede hacer que falle en algunos navegadores).