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 );
}