想法在我的網頁上正確的功能？

-1

我遇到了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; 
         } 
        } 
       } 
      } 
     } 
    } 
} 
}

不是有人從你知道它怎麼會工作？

感謝您的幫助！

問候皮埃爾

來源

2017-02-22 Pierre

我看到一對夫婦的問題與您的代碼。首先，<i>元素用於將斜體格式化應用於文本。它不是圖標或圖像的HTML代碼。

其次，你寫的botStatusImage.class.innerHTML，但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代碼與圖像更新代碼分開，並且可以單獨測試它們。

關鍵是功能較小。先構建簡單的東西，然後從更難的功能中調用那些簡單的功能。一旦你知道簡單的功能運行良好，在更難的功能中找到問題變得更容易。

來源

2017-02-22 00:51:40

想法在我的網頁上正確的功能？

回答

相關問題