InnerHtml
Publicado por Innerhtml (1 intervención) el 07/05/2017 23:43:03
Hola necesito saber como hacer para que no se repitan las imagenes de las demas secciones en este programa:
Es decir que me queden las imagenes de motos solo en el encabezado motos y asi con las demas.
Es decir que me queden las imagenes de motos solo en el encabezado motos y asi con las demas.
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
<h1>Automotora</h1>
<h2>Autos</h2>
<div id="autos">
</div>
<h2>Motos</h2>
<div id="motos">
</div>
<h2>Camiones</h2>
<div id="camiones">
</div>
<script>
function dibujarVehiculo() {
var imagen = `<img src='${this.imagen}' style='max-width:300px;'/>`
var marca = `<li>Marca: ${this.marca}</li>`
var modelo = `<li>Modelo: ${this.modelo}</li>`
var color = `<li>Color: ${this.color}</li>`
return `${imagen}<ul>${marca}${modelo}${color}</ul>`;
}
var imagenes = {
"gol" : "http://img.autocosmos.com/noticias/fotosprinc/NAZ_a7263830ab59439cb27fa1f4e4f92ff0.jpg",
"500" : "https://cps.contentservices.fcagroup.com/contentservice/fiat/UK-en/PublishingImages/AEM/500/Free_Paint/new_promo/500_Image.jpg",
"Picanto" : "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6m8iRp4gA9TCIhP6D4NgTUp5Q582BGjdD1ERB-6uPIw1SQ0IiYw",
"panigale" : "http://www.motorcycle-usa.com/wp-content/uploads/2016/11/Duc-959-Panigale-2016.jpg?378220",
"hayabusa" : "http://www.totalmotorcycle.com/photos/2009models/2009-Suzuki-HayabusaGSX1300Ra.jpg",
"ninja" : "https://content.kawasaki.com/Content/Uploads/Products/7304/Colors/jkm5wu0v.04c.png",
"jac" : "http://www.nortemotors.com.uy/wp-content/uploads/2013/07/1caac835-44a6-483a-bea4-bb8813ff47b7-camion-jac-1063.png",
"foton" : "http://www.racing5.cl/wp-content/uploads/2013/11/DSC_00021.jpg",
};
var obj = {}; // shorthand para crear obj
// var autos = []; // shorthand array
var vehiculos = [];
var autos = [];
autos.push({ marca: "Volkswagen", imagen: imagenes["gol"], color:"blanco",
modelo : "Gol", anio : 2017, dibujar: dibujarVehiculo });
autos.push({ marca: "Fiat", imagen: imagenes["500"],
color:"blanco", modelo : "500", anio : 2015, dibujar: dibujarVehiculo });
autos.push({ marca: "Kia", imagen: imagenes["Picanto"],
color:"blanco", modelo : "Picanto", anio : 2014, dibujar: dibujarVehiculo });
var motos = [];
motos.push({ marca: "Ducati", modelo: "Panigale", color: "blanco", imagen: imagenes["panigale"], dibujar: dibujarVehiculo, tipo: "moto" });
motos.push({ marca: "Susuki", modelo: "Hayabusa", color: "blanco", imagen: imagenes["hayabusa"], dibujar: dibujarVehiculo, tipo: "moto" });
motos.push({ marca: "Kawasaki", modelo: "NINJA", color: "verde", imagen: imagenes["ninja"], dibujar: dibujarVehiculo, tipo: "moto" });
var camiones = [];
camiones.push({ marca: "Jac", modelo: "1063", color: "blanco", imagen: imagenes["jac"], dibujar: dibujarVehiculo, tipo: "moto" });
camiones.push({ marca: "Foton", modelo: "Auman", color: "blanco", imagen: imagenes["foton"], dibujar: dibujarVehiculo, tipo: "moto" });
vehiculos.push(autos);
vehiculos.push(motos);
vehiculos.push(camiones);
// recorro vehiculos y dibujo
for (var indexV = 0; indexV < vehiculos.length; indexV++) {
var actual = vehiculos[indexV];
for (var indexC = 0; indexC < actual.length; indexC++) {
var vehiculo = actual[indexC];
dibujarEnPantalla(vehiculo);
}
}
function dibujarEnPantalla(vehiculo) {
var contenedor = document.getElementById("autos");
contenedor.innerHTML += vehiculo.dibujar();
var contenedor = document.getElementById("motos");
contenedor.innerHTML += vehiculo.dibujar();
var contenedor = document.getElementById("camiones");
contenedor.innerHTML += vehiculo.dibujar();
}
</script>
</body>
Valora esta pregunta
0