I can’t figure out how to make the images show up on the web page. I am very new to the coding scene.
<html>
<head>
<title>Car Search</title>
</head>
<body>
<select name="cars" id="cars">
<option value="Select a Car">Select a Car</option>
</select>
<button id="search-car-btn">Click to Search!</button>
<p>
<h3 id="car-name"></h3>
<h3 id="car-color"></h3>
<h2 id="car-price"></h2>
</p>
<img src="" id="car-image" alt="car" width="400" height="400"><br/>
<script>
var carID=[0,1,2,3,4];
var names=[
"Mercedes",
"VolksWagen",
"Toyota",
"Subaru",
"Audi"
];
var colors=[
"Navy Blue",
"Crimson",
"Lollipop Green",
"Sunset Yellow",
"Blood Red"
];
var price=[
"200,000 Dollars",
"40,000 Dollars",
"10,000 Dollars",
"25,000 Dollars",
"150,000 Dollars"
];
var images=[
"mercedes.jpg">,
"volkswagen.webp">,
"toyota.jpg">,
"subaru.jpg">,
"audi.jpg"
];
var selection=document.getElementById("cars");
//populate the dropdown dynamically
for (var i = 0; i < names.length; i++) {
var option=document.createElement("option");
option.setAttribute("id",carID[i]);
option.setAttribute("value",names[i]);
option.innerHTML=names[i];
selection.appendChild(option);
};
document.getElementById("search-car-btn").onclick=function(e){
var select=document.getElementById("cars");
var option=select.options[select.selectedIndex];
var id=option.getAttribute("id");
document.getElementById("car-name").innerHTML=names[option.id];
document.getElementById("car-color").innerHTML=colors[option.id];
document.getElementById("car-price").innerHTML=price[option.id];
document.getElementById("car-image").setAttribute("src","images/"+images[option.id]);
}
</script>
</body>
</html>