Getting [object HTMLImageElement] instead of the image

Viewed 14129

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

4 Answers

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;
Related