CODEWITHSUNDEEP
javascriptphphtmlarrays
Jro
Jro

Reputation: 476

Javascript trying to change text colour in a dynamically created html list

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>

Upvotes: 0

Views: 584

Answers (1)

Shafiqul Islam
Shafiqul Islam

Reputation: 5690

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>

Upvotes: 1

Related Questions