JavaScript can't display Image within an Array

Question

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:

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

All my objects appear on my webpage but the showImagetheMiddle gives me the following error:

[object 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!

Answer 1

Since arrayTheMiddle is the array, you need to use the subscript operator [] to get an element from it. In your example, the image is the first (0-th) element in the array. 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. 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:

Syntax:

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