我試圖讓陣列物件中的鏈接在回圈通過時顯示，但它們顯示為斷開的鏈接。斷開的鏈接代碼
<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_(album).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);
}
我究竟做錯了什么？我嘗試了兩種不同的方式，這種方式至少是顯示斷開鏈接的唯一方式。任何幫助或見解表示贊賞。
uj5u.com熱心網友回復：
您必須使用 photo.art 傳入每張照片的 url，而不是 'data.art'
uj5u.com熱心網友回復：
你應該使用img_node.setAttribute('src', photo.art). 像下面的例子：
...
for (let photo of songs){
let img_node = document.createElement ('img');
img_node.setAttribute('src', photo.art);
document.getElementById("images").appendChild(img_node);
}
uj5u.com熱心網友回復：
您有data.art引號，因此將其視為字串而不是物件。此外，您的 for 回圈正在宣告，photo因此您應該更改data.art為photo.art. 像這樣：
for (let photo of songs){
let img_node = document.createElement ('IMG');
img_node.setAttribute('src', photo.art);
document.getElementById("images").appendChild (img_node);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/383201.html
標籤：javascript 数组 图片 for循环
上一篇：谷歌地圖內容安全政策錯誤