Getting [object HTMLImageElement] instead of the image

Question

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].

Answer 1

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>