JavaScript無法顯示數組中的圖像

Question

我有以下數組：

function theMiddle(){
var arrayTheMiddle = new Array (showName.theMiddle  +"<br />" + beginingTime.theMiddle  +"  <br    />" + network.abc  +"<br />" + duration.thirty  +"<br />" + rating.general  +"<br />" +    description.theMiddle  +"<br />" + showImagetheMiddle);
 document.getElementById("gridbar").innerHTML=(arrayTheMiddle);
 }

該數組中的最后一個對象showImagetheMiddle是具有以下代碼的圖像：

 var showImagetheMiddle = new Image();
 showImagetheMiddle.src = 'abc.jpg';

我所有的對象都出現在我的網頁上，但是showImagetheMiddle給我以下錯誤：

[對象HTMLImageElement]

我環顧四周，但是發現了顯示圖像的更復雜的方法，我想保持它的簡單，並將圖像添加到現有數組中（如上所示）。 這可能嗎？ 如果不是，我在這里做錯了什么？

非常感激任何的幫助！

Answer 1

由於arrayTheMiddle是數組，因此您需要使用下標運算符[]從中獲取元素。 在您的示例中，圖像是數組中的第一個（第0個）元素。 您的行應改為：

document.getElementById("gridbar").innerHTML = arrayTheMiddle[0];

附帶說明一下，最好使用方括號表示法[] （而不是下標運算符）創建數組。

var arrayTheMiddle = [ ... ];

編輯：看到您的評論后，我現在建議您使用.appendChild將元素插入文檔中。 因為僅通過+附加將無法按您期望的方式工作。 這是您的代碼：

var arrayTheMiddle = [showName.theMiddle  +"<br />" + beginingTime.theMiddle  +"  <br    />" + network.abc  +"<br />" + duration.thirty  +"<br />" + rating.general  +"<br />" +    description.theMiddle  +"<br />"];

document.getElementById("gridbar").innerHTML = arrayTheMiddle[0];
document.getElementById("gridbar").appendChild( showImagetheMiddle );

我在您的代碼中發現了一些誤解。 例如，我認為您不了解數組如何工作。 因此，這里是一些信息：

句法：

數組元素是使用方括號[]創建的。 數組的元素由逗號運算符分開, 。 例如：

var l = [ 5, 3, 5, 6 ];

數組元素僅用逗號分隔。 +運算符不會將它們分開。 因此，這里是有效的代碼，但是數組中只有一個元素：

var l = [ 5 + 3 + 5 + 6 ];

在您的代碼示例中，數組是多余的。 沒有它，您可以很好地完成所需的工作。 所以這是您的新代碼：

function theMiddle() {
    var arrayTheMiddle = ; // the same without '[' and ']'
    document.getElementById("gridbar").innerHTML= arrayTheMiddle;
    document.getElementById("gridbar").appendChild( showImagetheMiddle );
}