I am trying to add 4 images on my site however the images are not loading. I can see 4 images in the inspector tool, however they are not showing up.
This is my code in JS:
function createZooland(zoolandData) {
let content = document.getElementById("content");
let h2 = document.createElement("h2");
let h3 = document.createElement("h3");
let blockquote = document.createElement("blockquote");
let img = document.createElement("img");
h2.innerHTML = `${zoolandData[0].common_name}`;
content.appendChild(h2);
h3.innerHTML = `${zoolandData[0].scientific_name}`;
content.appendChild(h3);
blockquote.innerHTML = `${zoolandData[0].description}`;
content.appendChild(blockquote);
for(let i = 0; i < zoolandData.length; i++){
for(let j = 0; j < zoolandData[i].images["image"].length; j++){
img.src = "images/" + `${zoolandData[0].images.image}`;
content.appendChild(img);
}
}
}
and this is the JSON it's referencing:
{
"common_name": "Koala",
"scientific_name": "Phascolarctos cinereus",
"description": "Koalas are well-known...",
"images": {
"image": [
"koala1.jpg",
"koala2.jpg",
"koala3.jpg",
"koala4.jpg"
]
}
},
Please let me know if any additional information is needed. I'm not sure how to get the images to display.
You need to move img = document.createElement("img"); inside the loop
Or just do this
const zoolandData = [{ "common_name": "Koala", "scientific_name": "Phascolarctos cinereus", "description": "Koalas are well-known...", "images": { "image": [ "koala1.jpg", "koala2.jpg", "koala3.jpg", "koala4.jpg" ] } }, { "common_name": "Dwarf wallaby", "scientific_name": "Notamacropus dorcopsulus", "description": "Native to New Guinea, it is the smallest known wallaby species ...", "images": { "image": [ "wallaby1.jpg", "wallaby2.jpg", "wallaby3.jpg", "wallaby4.jpg" ] } } ];
content.innerHTML += zoolandData
.map(entry => `<h2>${entry.common_name}</h2>
<h3>${entry.scientific_name}</h3>
<blockquote>${entry.description}</blockquote>
${entry.images.image
.map(src => `<img src="images/${src}" alt="${src}" />`).join("")}`
).join("")<div id="content"></div>