javascript函数使用颜色数组和for循环来着色

我创建了一个函数，用于从JSON对象创建一些html元素。我还创建了一个由3种不同颜色组成的数组，并希望循环遍历该数组，每次使用每种颜色为html元素组成的句子的一部分着色。 此特定对象中有2个角色（即singleJSONObj.roles.length等于2）。我试图让它在循环时将第一个html元素打印为“DarkSalmon”，然后将下一个元素打印为“ForestGreen”。但是，它正在用“Darksalmon”打印两个角色名。请看下面我的代码。我错过了什么

function createHtmlElementsforRoleNumbers (singleJSONObj, XML)
{

// result to be returned
    var finalXML;

    var colorArr = ["DarkSalmon", "ForestGreen", "Brown"]

// block of html elements to be created
    var htmlforRoleNumbers = "";

    for ( var i=0; i< singleJSONObj.roles.length; i++)
    {
        // each time creating one html element.
        // e.g. If length above is 2, create 2 h4 elements.
        htmlforRoleNumbers = htmlforRoleNumbers +
            "<h4><br> - a(n) <font color='" + colorArr[i] + "'>" +
                singleJSONObj.roles[i].name +
            "</font><br></h4>";

    }
    finalXML =  String(XML).replace(/Role_numbers/g,htmlforRoleNumbers)

    // output
    return finalXML;
}

函数createHtmlElementsforRoleNumbers（singleJSONObj，XML）
{
//要返回的结果
var finalXML；
var colorArr=[“黑色”、“森林绿”、“棕色”]
//要创建的html元素块
var htmlforlolenumbers=“”；
for（var i=0；i-a（n）”+
singleJSONObj.roles[i].name+
“
”；
}
finalXML=String（XML）.replace（/Role\u numbers/g，htmlforRoleNumbers）
//输出
返回finalXML；
}

此代码对我来说似乎有效。它是按预期在

singleJSONObj.roles[i].name

之间循环，还是同时两次打印第一个索引的

name

。这里有一把小提琴在演示：