Bueno estuve trabajando en el proyecto pero no puedo hacer aparecer las imagenes de los autos en el html. Ya probe varias formas sin tener resultados satisfactorios. O sea rompia el codigo o como desde el principio, nunca aparecio la foto. Ahora les voy a cargar el html. Y los dos js. Gracias
//Recupera el elemento donde se mostrara la lista de autos
const lista_autos = document.getElementById('lista-autos')
//Funciona para renderizar la lista con la informacion de cada auto la cual puede recibir el parametro de "marca" que por defecto tiene el valor default
function renderListaAutos(marca = "default"){
//Define un parametro para construir el html a insertar en el documento
let html_lista_autos = ''
//Recorre la lista de autos
autos.forEach((auto) => {
let html_info_auto = ''
if(marca === "default"){
html_info_auto = '<div>'+
'<table>'+auto.modelo+' ' +auto.year+'</table>'+
'</div>'
}else{
if(marca === auto.marca){
html_info_auto = `<div>
<div>
<img src="https://via.placeholder.com/100x100.png?text=auto+marca" width="100" height="100" >
//Aquie es donde estoy atorado. Para cargar las imagenes. Gracias!
<label>${auto.marca} , ${auto.modelo} , ${auto.year} \$${auto.precio} , ${auto.puertas} puertas , transmisión: ${auto.transmision}</label></div></div>`
}
}
html_lista_autos += html_info_auto
})
lista_autos.innerHTML = html_lista_autos
}
function onChangeSelect(event){
renderListaAutos(event.target.value);
}
document.getElementById('buscar').addEventListener("change", onChangeSelect);
window.onload = () => {
renderListaAutos()
}
//Evento boton Mostrar mas
const articulo =document.querySelector("#intro");
const button = document.querySelector("#miBoton");
button.addEventListener("click", leerMas);
function leerMas() {
if (articulo.className == "cerrado") {
articulo.className = "abierto";
button.textContent = "Mostrar menos"
} else {
articulo.className = "cerrado";
button.textContent = "Mostrar más"
}
}
function entrar() {
const usu = document.getElementById("nombrePrincipal").value;
const pass = document.getElementById("passPrincipal").value;
console.log(usu, pass);
if (usu == "Guille" && pass == "234") {
window.location.href = "panel.html";
localStorage.usuario = usu
} else {
alert("Error")
}
}
const autos = [
{
marca: 'BMW',
modelo: 'Serie 3',
year: 2020,
precio: 3000000,
puertas: 4,
transmision: 'Automática',
color: 'Blanco',
img: 'https://http2.mlstatic.com/D_NQ_NP_655202-MLA49344293576_032022-O.webp'
},
{
marca: 'Audi',
modelo: 'A4',
year: 2020,
precio: 4000000,
puertas: 4,
transmision: 'Automática',
color: 'Negro',
img: 'https://imgcla.lavoz.com.ar/files/imagecache/ficha_aviso_628_418_sc/avisos/aviso_auto/aviso-auto--10768808.JPG'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2015,
precio: 2000000,
puertas: 2,
transmision: 'Automática',
color: 'Blanco',
img: 'https://www.alvolante.info/wp-content/uploads/Ford-Day-Mustang-blanco-frente-lateral.jpg'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2015,
precio: 3500000,
puertas: 2,
transmision: 'Automática',
color: 'Azul',
img: 'https://es.digitaltrends.com/wp-content/uploads/2016/09/2016-dodge-challenger-srt-392-front-corner-800x533-c-720x480-c.jpg?fit=720%2C720&p=1'
},{
marca: 'Renault',
modelo: 'Megane III',
year: 2017,
precio: 2500000,
puertas: 4,
transmision: 'Automatica',
color: 'Gris',
img: 'https://www.reezocar.com/480/ouestfrance-auto.com/RZCOSTFR16889376/RENAULT-MEGANE-00.jpg'
},
];
Tuve que achicar el array de los autos porque no me dejaba guardar la pregunta.
<!DOCTYPE html>
<html lang="es">
<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="style.css" />
<title>Buscador de Autos</title>
</head>
<body>
<h1>Buscador de Autos Usados</h1>
<h2>Busqueda de Autos según nombre de la Marca.</h2>
<h3>"Audi, BMW, Chevrolet, Dodge, Ford, Mercedes Benz, o Renault"</h3>
<article id="intro" class="cerrado">
<p>Nos destacamos como uno de los sitios donde se puede encontrar la mayor cantidad de vehículos de Rosario y la región. </p>
<p>En el 2021, el rubro de ventas usados en sitios web, comienza a tomar su propia forma.</p>
<p>El servicio está orientado a brindar una herramienta práctica para la localización y ofrecimiento de vehículos, trazando un contacto directo entre comprador y vendedor.</p>
<p>Actualmente contamos con un flujo de aproximadamente unas 700 visitas diarias que navegan integramente el sitio.</p>
<p>Estas características nos permiten ofrecer a las empresas un servicio autoadministrable que asegura que sus productos serán visitados por nuestra comunidad de usuarios.</p>
<p>Si le interesa obtener mayor información acerca de como su concesionaria o agencia puede ser parte de nuestro sitio web,
no deje de enviarnos su consulta ingresando sus datos en el formulario de contacto y un representante se comunicará con usted para brindarle todo el detalle necesario.</p>
<p>soporte@buscadorautos.com.ar</p>
</article>
<button id="miBoton">Mostrar Más...</button>
<form id="formularioMarcas" class="caja">
Selecciona:<br/>
<select id="buscar">
<option value="default" selected>Selecciona una marca</option>
<option value="Audi">Audi</option>
<option value="BMW" >BMW</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
<option value="Mercedes Benz">Mercedes Benz</option>
<option value="Renault">Renault</option>
</select><p/>
<input type="submit" id="Reset" value="Reset" />
</form>
<div id="lista-autos" class="autos">
<img src=" " id="imagen"class="main_img">
</div>
<footer class="footer">
<p>Copyright © Guillermo S. Machado</p>
<p><a class="twitter" href="https://twitter.com/Guillo_Machado" target="_blank" title="Twitter de Guillermo">Twitter</a></p>
<p><a class="facebook" href="https://www.facebook.com/guillermo.machado" target="_blank" title="Facebook de Guillermo">Facebook</a></p>
</footer>
<script src="app.js"></script>
<script src="autos.js"></script>
</body>
</html>
Ya estuve viendo de mil maneras pero no encuentro la manera desde el if. Todos lo declaran de diferente forma. Desde el if no puedo, no veo el modo. gracias! Espero que alguno pueda encontrar mi error o lo que no estoy viendo. Gracias de antemano!!