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

Question

我创建了一个从JSON对象创建一些html元素的函数。我还创建了一个由3种不同颜色组成的数组，并希望循环遍历数组，每次使用每种颜色来为html元素形成的句子的部分颜色着色。 此特定对象中有两个角色（即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;
}