[英]JavaScript can't display Image within an Array
I have the following array: 我有以下数组:
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);
}
The last object in that array, showImagetheMiddle is an image with the following code: 该数组中的最后一个对象showImagetheMiddle是具有以下代码的图像:
var showImagetheMiddle = new Image();
showImagetheMiddle.src = 'abc.jpg';
All my objects appear on my webpage but the showImagetheMiddle gives me the following error: 我所有的对象都出现在我的网页上,但是showImagetheMiddle给我以下错误:
[object HTMLImageElement] [对象HTMLImageElement]
I've looked around but found more complex ways to display an image, I would like to keep it simple and add the image within my existing array (as shown above). 我环顾四周,但是发现了显示图像的更复杂的方法,我想保持它的简单,并将图像添加到现有数组中(如上所示)。 Is this possible?
这可能吗? If not what am I doing wrong here?
如果不是,我在这里做错了什么?
Any help would be most appreciated! 非常感激任何的帮助!
Since arrayTheMiddle
is the array, you need to use the subscript operator []
to get an element from it. 由于
arrayTheMiddle
是数组,因此您需要使用下标运算符[]
从中获取元素。 In your example, the image is the first (0-th) element in the array. 在您的示例中,图像是数组中的第一个(第0个)元素。 Your line should be this instead:
您的行应改为:
document.getElementById("gridbar").innerHTML = arrayTheMiddle[0];
As a side note, it's much better to create arrays using the square bracket notation []
(not the subscript operator). 附带说明一下,最好使用方括号表示法
[]
(而不是下标运算符)创建数组。
var arrayTheMiddle = [ ... ];
EDIT: After seeing your comment I now recommend you use .appendChild
to insert the element into the document. 编辑:看到您的评论后,我现在建议您使用
.appendChild
将元素插入文档中。 Because simply appending by +
won't work the way you expect. 因为仅通过
+
附加将无法按您期望的方式工作。 Here is your code: 这是您的代码:
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 );
I found some misconceptions in your code. 我在您的代码中发现了一些误解。 For example, I don't think you understand how arrays work.
例如,我认为您不了解数组如何工作。 So here is some information:
因此,这里是一些信息:
Array elements are created using the square bracket notation []
. 数组元素是使用方括号
[]
创建的。 The elements of an array are separated by the comma operator ,
. 数组的元素由逗号运算符分开
,
。 For instance: 例如:
var l = [ 5, 3, 5, 6 ];
Array elements are separated only by commas. 数组元素仅用逗号分隔。 The
+
operator doesn't separate them. +
运算符不会将它们分开。 So here is valid code, but there is only one element in the array: 因此,这里是有效的代码,但是数组中只有一个元素:
var l = [ 5 + 3 + 5 + 6 ];
In your code example, arrays are superfluous. 在您的代码示例中,数组是多余的。 You can very well do what you need without it.
没有它,您可以很好地完成所需的工作。 So here is your new code:
所以这是您的新代码:
function theMiddle() {
var arrayTheMiddle = ; // the same without '[' and ']'
document.getElementById("gridbar").innerHTML= arrayTheMiddle;
document.getElementById("gridbar").appendChild( showImagetheMiddle );
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.