Javascript 如何在我的网页上实现正确的功能？

我在使用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;
                        }
                    }
                }
            }
        }
    }
}
}

函数incomingBotStatusList（http_请求、状态关闭、状态打开）
{
如果（http_request.readyState==4）
{
如果（http_request.status==200）
{
if（http_request.responseText.length<7）
{
//错误
}
其他的
{
var botStatusList=JSON.parse（http_request.responseText）；
for（botStatusList中的var键）
{
if（botStatusList.hasOwnProperty（键））
{
var botStatusImage=document.getElementById（键）；
if（botStatusImage！=null）
{
if（botStatusList[键]==0）
{
botStatusImage.class.innerHTML=“images/bullet\u red.png”；
botStatusImage.title=statusOff；
botStatusImage.alt=statusOff；
}
else if（botStatusList[键]==1）
{
botStatusImage.class.innerHTML=“”；
botStatusImage.alt=statusOn；
botStatusImage.title=statusOn；
}
}
}
}
}
}
}
}

你身边的人知道它是如何工作的吗

谢谢你的帮助

致意

---

Pierre

我发现您的代码有几个问题。首先，

元素用于将斜体格式应用于文本。它不是图标或图像的HTML代码

其次，您编写了

botStatusImage.class.innerHTML

，但是

元素.class

不存在，并且

元素.className

是一个字符串。它没有

innerHTML

属性。因此，您可以编写

botStatusImage.className=“new\u class\u name”这将更正确

然后，您应该通过调用
botStatusImage.setAttribute（'src'，new\u url）
来更改图像源，在这里您已将new\u url设置为新图像位置

查看从
文档返回的
元素
类的javascript引用。getElementById
：

我的建议是，从简单开始，然后将其复杂化

首先，尝试在没有AJAX请求的情况下更改图标。尝试编写如下函数：

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

然后在控制台中测试这个函数，通过使用URL的

一旦成功，不要改变它！接下来添加AJAX调用，当您从服务器响应中获得图标url时，您所要做的就是调用您已经编写和测试过的函数。通过这种方式，您可以将AJAX代码与图像更新代码分开，并且可以单独测试它们

关键在于更小的功能。首先构建简单的东西，然后从较难的函数调用那些简单的函数。一旦知道easy函数运行良好，就可以更容易地在较难的函数中发现问题