HTML variable color

Question

I have a HTML form where the variables are pulled from JSON. The variable can be “In Progress”, “Pending” or “Completed”.

Is it possible to keep the background of Form based on variable?

The HTML code is below:

$(function() {
    $.getJSON('C:/GChartServlet/end.json', function(statusDataSet) {
        $.each(statusDataSet.statuses, function(i, f) {
            if(f.name=="Autogen Program") {
                $("#end1").append(f.value);
            }
            else if(f.name=="Auto Approval Program") {
                $("#end2").append(f.value);
            }
            else if(f.name=="Time Transfer from OTL to BEE") {
                $("#end3").append(f.value);
            }
        });
    });
});

I was trying to keep the form background or even value in different color depending on value it pulls from JSON.

I am new to HTML coding. Any help is appreciated.

Regards.

Barmar · Accepted Answer · 2014-08-05 07:00:10Z

3

$.getJSON('C:/GChartServlet/end.json', function(statusDataSet) {
    $.each(statusDataSet.statuses, function(i, f) {
        var color;
        switch(f.status) {
            case "In Progress":
                color = "yellow";
                break;
            case "Pending": 
                color = "red";
                break;
            case "Completed": 
                color = "green";
                break;
        }
        if(f.name=="Autogen Program") {
            $("#end1").append(f.value).css('background-color', color);
        }  else if(f.name=="Auto Approval Program") {
            $("#end2").append(f.value).css('background-color', color);
        } else if(f.name=="Time Transfer from OTL to BEE") {
            $("#end3").append(f.value).css('background-color', color);
        }
    });
});

edited Aug 5, 2014 at 7:00

answered Aug 5, 2014 at 6:01

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2854333 Over a year ago

@Barmar .. Thanks again for your help but when I try to use it I keep getting error Uncaught SyntaxError: Unexpected string on line 17 . The line 17 is " switch(f.value) { "In Progress": "

Barmar Over a year ago

Oops, I left out the case keywords in the switch block. Fixed now.

Collectives™ on Stack Overflow

HTML variable color

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related