Skip to main content
Publicación recuperada por caprilo
más información y corrección
Origen Enlace
caprilo
  • 501
  • 1
  • 9

Hay un problema con esta parte de tu código HTML:

  1. 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.

  1. 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).

Hay un problema con esta parte de tu código HTML:

<h5">Titulo</h5>

Al tener esas dobles comillas después de h5 y antes de cerrar la etiqueta, la expresión

templateCard.querySelector('h5')

devuelve nulo, porque el objeto no existe, y al tratar de obtener la propiedad textContent se genera ese error.

También tienes un problema en la línea

<div class=>

que igualmente hace que el código no se procese bien.

  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).

Publicación eliminada por caprilo
Agregué otro error del usuario
Origen Enlace
caprilo
  • 501
  • 1
  • 9

Hay un problema con esta parte de tu código HTML:

<h5">Titulo</h5>

Al tener esas dobles comillas después de h5 y antes de cerrar la etiqueta, la expresión

templateCard.querySelector('h5')

devuelve nulo, porque el objeto no existe, y al tratar de obtener la propiedad textContent se genera ese error.

También tienes un problema en la línea

<div class=>

que igualmente hace que el código no se procese bien.

Hay un problema con esta parte de tu código HTML:

<h5">Titulo</h5>

Al tener esas dobles comillas después de h5 y antes de cerrar la etiqueta, la expresión

templateCard.querySelector('h5')

devuelve nulo, porque el objeto no existe, y al tratar de obtener la propiedad textContent se genera ese error.

Hay un problema con esta parte de tu código HTML:

<h5">Titulo</h5>

Al tener esas dobles comillas después de h5 y antes de cerrar la etiqueta, la expresión

templateCard.querySelector('h5')

devuelve nulo, porque el objeto no existe, y al tratar de obtener la propiedad textContent se genera ese error.

También tienes un problema en la línea

<div class=>

que igualmente hace que el código no se procese bien.

Origen Enlace
caprilo
  • 501
  • 1
  • 9

Hay un problema con esta parte de tu código HTML:

<h5">Titulo</h5>

Al tener esas dobles comillas después de h5 y antes de cerrar la etiqueta, la expresión

templateCard.querySelector('h5')

devuelve nulo, porque el objeto no existe, y al tratar de obtener la propiedad textContent se genera ese error.