私のウェブページ上の正しい機能のアイデアですか？

Question

javascriptの機能に問題があります。私はクラスを変更してアイコンを置き換えたい。私のページで

、私は次の要素があります。

<i class="wait icon" alt="{webui_botstatenotavailable}" title="{webui_botstatenotavailable}" id="{botname}"></i> 

次のJavaScriptは、クラスを変更する必要がありますが、それは動作しませんが：

function incomingBotStatusList(http_request, statusOff, statusOn) 
{ 
if (http_request.readyState == 4) 
{ 
    if (http_request.status == 200) 
    { 
     if (http_request.responseText.length < 7) 
     { 
      // Error 
     } 
     else 
     { 
      var botStatusList = JSON.parse(http_request.responseText); 
      for (var key in botStatusList) 
      { 
       if (botStatusList.hasOwnProperty(key)) 
       { 
        var botStatusImage = document.getElementById(key); 
        if (botStatusImage != null) 
        { 
         if (botStatusList[key] == 0) 
         { 
          botStatusImage.class.innerHTML = "images/bullet_red.png"; 
          botStatusImage.title = statusOff; 
          botStatusImage.alt = statusOff; 
         } 
         else if (botStatusList[key] == 1) 
         { 
          botStatusImage.class.innerHTML = "<i class=\"checkmark green icon\">"; 
          botStatusImage.alt = statusOn; 
          botStatusImage.title = statusOn; 
         } 
        } 
       } 
      } 
     } 
    } 
} 
} 

はあなたから誰かがそれをする方法を知っていました作業？

ありがとうございました！

よろしく ピエール

Answer 1

私はあなたのコードで問題のカップルを参照してください。最初に、<i>要素を使用して、イタリックのテキストを書式設定します。アイコンや画像のHTMLコードではありません。

第2に、と記述しますが、Element.classは存在しません。Element.classNameは文字列です。 innerHTML属性はありません。したがって、あなたはbotStatusImage.className = "new_class_name";と書くことができ、これはもっと正しいでしょう。

botStatusImage.setAttribute('src', new_url)を呼び出してイメージソースを変更する必要があります。ここでは、new_urlを新しいイメージの場所に設定しています。

チェックアウトdocument.getElementByIdから返されElementクラスのためのjavascript参照：check this link

私の推薦を、そして、簡単な起動それが複雑に。

まず、AJAXリクエストなしでアイコンを変更しようとしてください。

function changeIcon(imageId, newUrl){ 
    var element = document.getElementById(imageId); 
    element.setAttribute("src", newUrl); 
} 

次に、この関数をURLで手動で呼び出すことでコンソールでこの関数をテストします。

これが機能したら、変更しないでください。次に、AJAX呼び出しを追加し、サーバーの応答からIcon URLを取得したら、既に書き、テストした関数を呼び出します。そうすることで、AJAXコードを画像更新コードから分離し、別々にテストすることができます。

キーは小さい機能です。最初に簡単なものを構築し、より難しい関数から簡単な関数を呼び出します。簡単な関数がうまくいくことがわかったら、より難しい関数で問題を見つける方がはるかに簡単になります。