Javascript试图在动态创建的html列表中更改文本颜色

Question

I am trying to change the text colour of items on the list. PHP read the data base obtain two arrays which are converted into JavaScript arrays. One array contain the text to be displayed on the list and other array contain information what should be the colour of the text.

I can set the background colour without any problem but I do not want to do that instead of I want to set the text colour.

Here is my JavaScript code; Can somebody tell me what am I doing wrong here?

<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

just change clolor to color. this is full code

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