Successfully add pictures

See more:

Javascript

HTML

image

I am new to coding. I cannot figure out why these images will not load on the webpage. I have made sure that they are listed the same as they are saved.

What I have tried:



<title>Car Search



Select a Car

 
Click to Search!

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 &lt; 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]);
}