Идеи для правильной функции на моей веб-странице?

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

ли кто-то из вас знает, как это будет Работа?

Благодарим за помощь!

С наилучшими пожеланиями Pierre

Answer 1

Я вижу несколько проблем с вашим кодом. Во-первых, элемент <i> используется для применения курсивом форматирования к тексту. Это не код HTML для значка или изображения.

Во-вторых, вы пишете botStatusImage.class.innerHTML, но Element.class не существует, а Element.className - это строка. Он не имеет атрибута innerHTML. Итак, вы могли бы написать botStatusImage.className = "new_class_name";, и это было бы вернее.

Затем вы должны изменить источник изображения, позвонив по номеру botStatusImage.setAttribute('src', new_url), где вы установили new_url в новое местоположение изображения.

Ознакомьтесь яваскриптом ссылки на Element класса, который возвращается из document.getElementById: check this link

Моей рекомендация, начать с простым, а затем сделать его сложным.

Сначала попробуйте изменить значок без запроса AJAX. Попробуйте написать такую ​​функцию:

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

Затем проверьте эту функцию в консоли, пропустив ее с помощью URL-адреса вручную.

Как только это работает, не меняйте его! Затем добавьте вызов AJAX, и когда у вас есть URL-адрес Icon от вашего ответа на сервер, все, что вы делаете, это вызов функции, которую вы уже написали и протестировали. Таким образом вы отделите код AJAX от кода обновления изображения, и вы можете протестировать его отдельно.

Ключом являются меньшие функции. Сначала создайте легкий материал, а затем вызовите эти простые функции из более сложных функций. Как только вы узнаете, что легкая функция работает хорошо, намного легче найти проблемы в более сложных функциях.