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