3

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>
1
  • 1
    Hm, yo le añadiría una validación que confirme que ya se cargó todo el documento. No es evidente en qué momento el script intenta obtener el fragmento 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 )
    – Alfabravo
    Commented el 19 nov. 2021 a las 21:19

1 respuesta 1

0
  1. Hay un problema con dos líneas de tu código plantilla:
<h5">Titulo</h5>

y

<div class=>

Que puede dificultar o impedir que se procese el código dentro de ella.

  1. Los objetos dentro de una plantilla HTML no existen en el documento. Se crean cuando ejecutas la línea
const clone = templateCard.cloneNode(true)

Esa línea debe de estar antes de cualquier selección o inserción que hagas en la plantilla. De lo contrario, estás buscando objetos que no existen. Además le falta un content. Debe ser algo así:

const 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 1) la selección se hace sobre el objeto clone y 2) te hacen falta los punto y coma al final de las líneas (puede hacer que falle en algunos navegadores).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.