I am trying to get the links in the array objects to display when the loop goes through but they appear as broken links. broken link code
<p id= "tracks"> </p>
<div id = "images"> </div>
<script>
let songs = [
{
title: "Getting Away with It (All Messed Up)",
artist: "James",
album: "Pleased to Meet You",
year: 2001,
art: "https://upload.wikimedia.org/wikipedia/en/2/2a/JamesPleasedToMeetYou.jpg"
},
{
title: "Renaissance Affair",
artist: "Hooverphonic",
album: "Blue Wonder Power Milk",
year: 1998,
art: "https://upload.wikimedia.org/wikipedia/en/1/17/Hooverphonic-Blue_Wonder_Power_Milk.jpg"
},
{
title: "White Nights",
artist: "Oh Land",
album: "Oh Land",
year: 2011,
art: "https://upload.wikimedia.org/wikipedia/en/6/68/Oh_Land_%28album%29.png"
}
]
// Javascript Code here
element_p = document.getElementById("tracks")
//alert (element_p.innerHTML);
let text = "";
for (let data of songs) {
let new_paragraph= document.createElement ('p');
new_paragraph.innerHTML = 'Title: '+ data.title + " <br> Album: "+ data.album+ ' <br> Artist: ' + data.artist + "<br> Year: "+ data.year
element_p.appendChild(new_paragraph)
}
element_div = document.getElementById ("images")
let image = "";
for (let photo of songs){
let img_node = document.createElement ('IMG');
img_node.setAttribute('src', "data.art");
document.getElementById("images").appendChild (img_node);
}
What am I doing wrong? I tried two different ways and this way is the only way at least the broken links show up. Any help or insight is appreciated.
Instead of 'data.art' you have to pass in the url from each photo you are passing in by using photo.art
You should use img_node.setAttribute('src', photo.art). like below example:
...
for (let photo of songs){
let img_node = document.createElement ('img');
img_node.setAttribute('src', photo.art);
document.getElementById("images").appendChild(img_node);
}
You have data.art in quotes so its treated as a string instead of an object. Also, your for loop is declaring photo so you should change data.art to photo.art. Like this:
for (let photo of songs){
let img_node = document.createElement ('IMG');
img_node.setAttribute('src', photo.art);
document.getElementById("images").appendChild (img_node);
}