CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3
Lisa Lemons
Lisa Lemons

Reputation: 160

How to change string font color using JavaScript

EDIT: I am creating a dashboard for my company that displays all of our latest projects. I'm an intern for the application development team. The dashboard displays the names of the projects and their latest builds, as well as the statuses of those builds.

I'm using a dynamic string that changes between SUCCESS, FAILURE, ERROR, and UNKNOWN. These strings are displayed in HTML using td class="status". The statuses can change based on whether a project build failed or succeeded. SUCCESS should be green, FAILURE should be red, and all others should be black. I have a for loop creating the table.

I'm attempting to use a switch statement to change the font color based on the content of the string using javascript's function .fontcolor(). The string is getting pulled from status.status

At the moment everything is displaying properly on the screen but the font color is not actually changing. I'm not getting any errors either.

for (var i in buildstatuses) {
                var status = buildstatuses[i];


                switch (status.status) {
                    case "SUCCESS":
                        status.status.fontcolor("green")
                        break;
                    case "FAILURE":
                        status.status.fontcolor("red")
                        break;
                    default:
                        status.status.fontcolor("black")
                        break;
                }

                $("tr#" + status.id + " td.status").html(status.status)

                if (status.status != "SUCCESS") {

                    var row = $("tr#" + status.id)


                           row.parent().parent().parent().parent().parent().removeClass("dashboard-success").addClass("dashboard-fail");

                    row.parent().parent().prepend(row.clone());  // Places Failure at the top by cloning then removing
                    row.remove();

                }
                $("tr#" + status.id + " td.date").html(status.date)
                console.log(status.id);
            }

Upvotes: 1

Views: 6921

Answers (4)

Shyju
Shyju

Reputation: 218832

I will move that to a little function

function ChangeColor(result)
{
    var item=$(".status");
    if(result=="SUCCESS")
        item.css("color","green");
    if(result=="FAILURE")
        item.css("color","red");    
}

You can call it like this

ChangeColor("FAILURE");

or 

ChangeColor("SUCCESS");

So in your code,

for (var i in buildstatuses) {
    var status = buildstatuses[i];
    ChangeColor(status.status);

   //your remaining code to do whatver you want after changing the color
}

Sample : http://jsfiddle.net/gVV3U/3/

Upvotes: 1

JoshNaro
JoshNaro

Reputation: 2097

I think you just want to change the css color inline:

var statusColor = 'black';
switch (status.status) {
  case "SUCCESS":
    statusColor = "green";
    break;
  case "FAILURE":
    statusColor = "red";
    break;
  default:
    statusColor = "black";
    break;
 }

 $("tr#" + status.id + " td.status").html(status.status).css('color', statusColor);

Upvotes: 1

Vimalnath
Vimalnath

Reputation: 6463

You could just do it using JavaScript style function: EX:

document.getElementById('yourId').style.color = 'red';

or use jquery:

 $('#yourid').css('color','red');

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

You are not using the color in your HTML..

Change 

$("tr#" + status.id + " td.status").html(status.status)

to

$("tr#" + status.id + " td.status")
        .html(status.status) // set text
        .css({color: status.status.fontcolor}); // set color

Upvotes: 0

Related Questions