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!

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 14, 2012 at 1:14

David G

97.6k41 gold badges173 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

junaidkaps Over a year ago

Actually my image object, showImagetheMiddle is the last object listed within my array. All objects listed before it appear, but the image object does not. I'm assuming that I can't just drop in an image object into an existing array like I am doing currently?

David G Over a year ago

@junaidkaps No, don't do that. Use .appendChild on the document object. I'll update my post.

junaidkaps Over a year ago

Ah! Understood! Works perfectly, thank you good Sir! Apologize for the misrepresentation. On a side note would appendChild be the best or rather most correct way to display images?

David G Over a year ago

@junaidkaps Yes, in fact it recommended that you put other HTML elements into the DOM this way. Also + doesn't separate array elements. The comma operator does ,. Moreover, you don't need an array for this. I'll update my post again with details.

junaidkaps Over a year ago

Thank you for the clarification on the Array. Yes I was under the impression that the '+' operator separated the elements and not ',' operator. I'm new to JavaScript and never would have realized that! Truly appreciate it!

Collectives™ on Stack Overflow

JavaScript can't display Image within an Array

1 Answer 1

Syntax:

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Syntax:

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related