Cómo devolver éstos datos del DOM?
Publicado por Mariana (10 intervenciones) el 01/12/2022 13:14:23
Hola a todos! Estoy con un ejercicio de Javascript que implica simular un carrito de compras, pero cargando las tarjetas de los productos en forma dinámica a través del DOM y agregarlos a un div contenedor que emulará el catálogo. Quise usar una función para automatizar la creación de todas las etiquetas y que a medida que se van creando tomen los datos del array Productos.
Lo que no estoy pudiendo hacer es una vez que tengo las etiquetas de los productos poder integrarlas al catálogo y hacerlas visibles en el documento HTML (por ahora sólo las veo en consola, pero en lugar de verlas por separado aparecen así div#productos )
Saludos y muchas gracias!
Lo que no estoy pudiendo hacer es una vez que tengo las etiquetas de los productos poder integrarlas al catálogo y hacerlas visibles en el documento HTML (por ahora sólo las veo en consola, pero en lugar de verlas por separado aparecen así div#productos )
Saludos y muchas gracias!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
let productos = [{
id: 1,
nombre: 'Lápiz labial rojo',
descripcion: 'Lápiz labial color rojo',
precio: 2.000,
imagen: '../img/labial.png',
categoría: 'Boca',
},
{id: 2,
nombre: 'Sombra de ojos',
descripcion: 'Varios colores de sombra de ojos',
precio: 3.200,
imagen: '../img/sombra__de__ojos.png',
categoría: 'Ojos',
},
{id: 3,
nombre: 'Rubor rosado',
descripcion: 'Rubor color rosado',
precio: 1.500,
imagen: '../img/rubor.png',
categoría: 'Cara',
},
{id: 4,
nombre: 'Delineador negro',
descripcion: 'Delineador color negro',
precio: 1.250,
imagen: '../img/delineador.png',
categoría: 'Ojos',
},
{id: 5,
nombre: 'Crema corporal de castañas',
descripcion: 'Botella de crema corporal de castañas',
precio: 2.100,
imagen: '../img/crema__corporal.png',
categoría: 'Cuerpo',
},
{id: 6,
nombre: 'Shampoo antiquiebre de castañas',
descripcion: 'Botellas de shampoo y acondicionador para el cabello',
precio: 2.550,
imagen: '../img/shampoo.png',
categoría: 'Cabello',
},
];// 1) Obtener el ID del carritoconst carrito = document.getElementById("minicarrito");
console.log(carrito);
// 2) Crear el catálogo de c/u de los productosconst catalogo = document.createElement("div");
catalogo.setAttribute("id", "productos");
let div = "";
const crearElementos = productos.map(producto => {
// a) Div que contendrá cada una de las tarjetasdiv = document.createElement("div");
// b) Crear la imglet img = document.createElement("img");
//c) Agregarle una claseimg.className = "tarjeta";
// d) Agregar el atributo src y la ruta accediendo a la propiedad imagen de cada objetoimg.setAttribute = ("src", producto.imagen);
// e) Agregar el atributo altimg.setAttribute = ("alt", "descripcion");
div.append(img);
// 3) Crear el cuerpo de cada tarjetalet tarjetaCuerpo = document.createElement("div");
tarjetaCuerpo.className = "card-body";
// 4) Crear h3 con el título de cada productolet tituloTarjeta = document.createElement("h3");
tituloTarjeta.className = "card-title";
tituloTarjeta.innerHTML = producto.nombre;
// Agregar el título del producto al cuerpo de la tarjetatarjetaCuerpo.append(tituloTarjeta);
// 5) Agregar la descripción de cada productolet descripcionProducto = document.createElement("p");
descripcionProducto.className = "card-text";
// Agregar la descripción de cada productodescripcionProducto.innerHTML = producto.descripcion;
// Agregar la descripción al cuerpo de la tarjetatarjetaCuerpo.append(descripcionProducto);
// Al div contenedor le agrego la tarjeta con toda la info del productodiv.append(tarjetaCuerpo);
catalogo.appendChild(div);
return div;
});
console.log(catalogo);
Valora esta pregunta
0