CODEWITHSUNDEEP
javascripthtml
Jeroen Uilhoorn
Jeroen Uilhoorn

Reputation: 55

Getting [object HTMLImageElement] instead of the image

I am revamping my website and I want a minecraft server status widget on there, I found a really good one from MCAPI.net. They have a demo HTML + JS code that I used and modified to my own use. The code writes everything as text with up for online and down for offline, but instead of boring old text I want an image, green for up, red for down. I Googled how to get innerHTML to show an image, after A LOT.. of finecking around I didn't get any error messages but I got [object HTMLImageElement] instead.. And now I'm stuck..

Full code (It's contained in it's own HTML file, I'll be copy/pasting it into it's own JS when it goes on the main site):

<script src="https://mcapi.us/scripts/minecraft.js"></script>
<div class="server-status">
<span class="server-online"></span>Players: <span class="players-online"></span>/<span class="players-max"></span>
</div>
<script>
  MinecraftAPI.getServerStatus('porotrails.com', {
  },
  
  function (err, status) {
	var up = new Image();
	var down = new Image();
	up.src = "images/up.png";
	down.src = "images/down.png";
    if (err) {
      return document.querySelector('.server-status').innerHTML = 'Error';
    }
	
    document.querySelector('.server-online').innerHTML = status.online ? up : down;
	document.querySelector('.players-online').innerHTML = status.players.now;
	document.querySelector('.players-max').innerHTML = status.players.max;
  });
</script>

I'm thinking for some reason this line is failing to do it's job.

document.querySelector('.server-online').innerHTML = status.online ? up : down;

TL;DR: I need to show an image instead of [object HTMLImageElement].

Upvotes: 5

Views: 20797

Answers (4)

Darwinnirad
Darwinnirad

Reputation: 19

maybe you can try the literal style, like this:

var up = "<img src='images/up.png' />";
var down = "<img src='images/down.png' />";

or using another way to get the information of that node

document.querySelector('.server-online').innerHTML = status.online ? up.outerHTML : down.outerHTML;

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

The issue is that when using .innerHTML(), you should provide a string value to become the content of the element in question, but you are using the W3C DOM Standard approach to creating a new element node and when you pass that object to the innerHTML() method, the JavaScript run-time, converts it into a string and the result is the description of that object (Object HTMLImageElement).

You can solve your problem in one of two ways...

  1. Don't use .innerHTML() and use .appendChild() instead. .appendChild() expects an object reference to be passed into it and since you have created explicit object instances (up and down), you can pass those.

  2. Use .innerHTML() and create a string value. When doing this, you make the HTML yourself and pass it as a string.

Below, I have adjusted your code to use approach #2, but added the commented code for solution 1 as well.

<script src="https://mcapi.us/scripts/minecraft.js"></script>
<div class="server-status">
<span class="server-online"></span>Players: <span class="players-online"></span>/<span class="players-max"></span>
</div>
<script>
  MinecraftAPI.getServerStatus('porotrails.com', {
  },
  
  function (err, status) {
    // Solution 1: Pass a string to innerHTML
	var up = "<img src='images/up.png'>";
	var down = "<img src='images/down.png'>";
    
    // Solution 2: Use DOM to create image element nodes and insert using DOM
    //var up = new Image();
    //var down = new Image();
    //up.src = 'images/up.png';
    //down.src = 'images/down.png';

    if (err) {
      return document.querySelector('.server-status').innerHTML = 'Error';
    }
	
    // Solution 1:
    document.querySelector('.server-online').innerHTML = status.online ? up : down;
    
    // Solution 2:
    //document.querySelector('.server-online').appendChild(status.online ? up : down);
    
    
	document.querySelector('.players-online').innerHTML = status.players.now;
	document.querySelector('.players-max').innerHTML = status.players.max;
  });
</script>

Upvotes: 9

afuous
afuous

Reputation: 1498

The issue is that when you change innerHTML, it expects a string, but up and down are image objects. Instead of changing the innerHTML, you can use appendChild to add the image to an element.

Replace

document.querySelector('.server-online').innerHTML = status.online ? up : down;

with

var container = document.querySelector('.server-online');
container.innerHTML = "";
container.appendChild(status.online ? up : down);

Before appending the image, the contents of the container must be cleared so that the old images are removed when the status changes.

Upvotes: 1

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60527

up and down are HTMLImageElement objects, not HTML strings. Assigning them to innerHTML casts them to strings, resulting in [object HTMLImageElement] from this line:

document.querySelector('.server-online').innerHTML = status.online ? up : down;

Try something like this instead:

var serverOnline = document.querySelector('.server-online');
// Remove any children (unnecessary if always empty before hand).
serverOnline.innerHTML = '';
// Append the image element.
serverOnline.appendChild(status.online ? up : down);

Alternately, you could make up and down HTML strings.

var up = '<img src="images/up.png" />';
var down = '<img src="images/down.png" />';

Upvotes: 1

Related Questions