動的に作成されたHTMLリストのテキストの色を変更しようとしているJavascript

Question

リストの項目のテキストの色を変更しようとしています。 PHPがデータベースを読み込み、JavaScript配列に変換された2つの配列を取得します。 1つの配列にはリストに表示されるテキストが含まれ、他の配列にはテキストの色を示す情報が含まれます。

私は問題なく背景色を設定できますが、テキストの色を設定する代わりにそのようにしたくありません。

ここは私のJavaScriptコードです。誰かが私がここで間違っていることを教えてもらえますか？

<script type="text/javascript"> 
    function lodlist() { 
    var Msgarray = <? php echo json_encode($Msgarray); ?> ; 
    var Clrarray = <? php echo json_encode($Clrarray); ?> ; 

    var div = document.getElementById('scroll'); 
    ul = document.createElement('ul'); 

    for (var i = 0; i < Msgarray.length; i++) { 

     var li = document.createElement('li'), 
     content = document.createTextNode(Msgarray[i]); 

     li.appendChild(content); 

     if (Clrarray[i] == "1" || Clrarray[i] == "2" || Clrarray[i] == "3") { 
     // li.style.backgroundColor = 'green'; // this works but I do not need it 

     li.style.clolor = "green"; // i want this but does not work 

     } else 
     if (Clrarray[i] == "6" || Clrarray[i] == "7" || Clrarray[i] == "8" || Clrarray[i] == "8") { 
     // li.style.backgroundColor = "red";  // this works but I do not need it 
     li.style.clolor = "red"; 

     } else 
     if (Clrarray[i] == "5" || Clrarray[i] == "6") { 
     // li.style.backgroundColor = "yellow";// this works but I do not need it 
     li.style.clolor = "yellow"; 

     } 

     ul.appendChild(li); 

    } 
    div.appendChild(ul); 

    } 
    onload = function() { 
    lodlist() 
    } 
</script> 

Answer 1

色を色に変更するだけです。これはフルコードです

<script type="text/javascript"> 
function lodlist() { 
var Msgarray = <?php echo json_encode($Msgarray); ?> ; 
var Clrarray = <?php echo json_encode($Clrarray); ?> ; 

var div = document.getElementById('scroll'); 
ul = document.createElement('ul'); 

for (var i = 0; i < Msgarray.length; i++) { 

    var li = document.createElement('li'), 
    content = document.createTextNode(Msgarray[i]); 

    li.appendChild(content); 

    if (Clrarray[i] == "1" || Clrarray[i] == "2" || Clrarray[i] == "3") { 
    // li.style.backgroundColor = 'green'; // this works but I do not need it 

    li.style.color = "green"; // i want this but does not work 

    } else 
    if (Clrarray[i] == "6" || Clrarray[i] == "7" || Clrarray[i] == "8" || Clrarray[i] == "8") { 
    // li.style.backgroundColor = "red";  // this works but I do not need it 
    li.style.color = "red"; 

    } else 
    if (Clrarray[i] == "5" || Clrarray[i] == "6") { 
    // li.style.backgroundColor = "yellow";// this works but I do not need it 
    li.style.color = "yellow"; 

    } 

    ul.appendChild(li); 

    } 
    div.appendChild(ul); 

} 
onload = function() { 
    lodlist() 
    } 
</script>