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