JavaScript - InnerHtml

 
Vista:

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder