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