イメージの代わりに[オブジェクトHTMLImageElement]を取得しています

Question

私のウェブサイトを改良していて、そこにミニクラフトサーバーステータスウィジェットが必要です。MCAPI.netから本当に良いものを見つけました。彼らには私が使い、自分の使いに変更したデモのHTML + JSコードがあります。このコードでは、すべてのものをテキストとしてオンラインで、オフラインではオフラインで書きますが、古いテキストを退屈ではなく、イメージが必要です。緑は上、下は赤です。私は

..私はすべてのエラーメッセージを取得できませんでしたが、私は代わりに[HTMLImageElementオブジェクト]を得た...そして今、私がこだわっているの周りfineckingの .. innerHTMLが LOT後、画像を表示するために取得する方法をGoogleで検索しました

完全なコードは（それがメインのサイトに行くとき、それはそれ自身のHTMLファイルに含まれています、私はそれ自身のJSへのコピー/貼り付け、それをだろう）：私は考えている

<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) { 
 
\t var up = new Image(); 
 
\t var down = new Image(); 
 
\t up.src = "images/up.png"; 
 
\t down.src = "images/down.png"; 
 
    if (err) { 
 
     return document.querySelector('.server-status').innerHTML = 'Error'; 
 
    } 
 
\t 
 
    document.querySelector('.server-online').innerHTML = status.online ? up : down; 
 
\t document.querySelector('.players-online').innerHTML = status.players.now; 
 
\t document.querySelector('.players-max').innerHTML = status.players.max; 
 
    }); 
 
</script>

なんらかの理由で、この行はその仕事をしていません。

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

TL; DR：[object HTMLImageElement]の代わりに画像を表示する必要があります。

Answer 1

問題が.innerHTML()を使用しているとき、あなたは新しい要素 ノードを作成したときにあなたがW3C DOM標準のアプローチを使用している 問題の要素の内容になるための string価値を提供していますが、すべきであるということですそのオブジェクトをinnerHTML()メソッド（ JavaScript実行時）に渡して文字列に変換し、結果はそのオブジェクトの説明（Object HTMLImageElement） になります。

あなたは

1. が.innerHTML()を使用し、代わりに.appendChild()を使用しないでください...次の2つの方法のいずれかで、あなたの問題を解決することができます。 .appendChild()は、オブジェクト参照が渡されることを期待しており、明示的なオブジェクトインスタンス（upとdown）を作成しているので、それらを渡すことができます。

2. .innerHTML()を使用して文字列値を作成します。これを行うと、HTMLを自分で作成し、それを文字列として渡します。

以下では、アプローチ＃2を使用するようにコードを調整しましたが、ソリューション1のコメント付きコードも追加しました。

<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 
 
\t var up = "<img src='images/up.png'>"; 
 
\t 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'; 
 
    } 
 
\t 
 
    // Solution 1: 
 
    document.querySelector('.server-online').innerHTML = status.online ? up : down; 
 
    
 
    // Solution 2: 
 
    //document.querySelector('.server-online').appendChild(status.online ? up : down); 
 
    
 
    
 
\t document.querySelector('.players-online').innerHTML = status.players.now; 
 
\t document.querySelector('.players-max').innerHTML = status.players.max; 
 
    }); 
 
</script>

Answer 2

upとdownHTMLImageElementオブジェクトではなく、HTMLの文字列です。innerHTMLにそれらを割り当てると、このラインから[object HTMLImageElement]その結果、文字列にそれらをキャスト：

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

は、この代わりのようなものを試してみてください：

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

代わりに、あなたはupとdown HTML文字列を作ることができます。

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

Answer 3

問題は、innerHTMLを変更すると、それは文字列を期待しますが、upとdownは、画像オブジェクトであるということです。 innerHTMLを変更する代わりに、appendChildを使用してイメージを要素に追加することができます。

画像を追加する前に

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

と

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

を交換し、古い画像が時にステータス変更削除されるように、コンテナの中身をクリアする必要があります。