Changing field text color and fill based on input value.

Question

I am trying to create a field that can be red, yellow or green.  In the end, what I need is a box that can be made red, yellow or green by the form user.  My strategy is to use a validation script to change the field and text color based on the field input.  So if you type "red", the text and field turn red, essentially making a red box.  The field is named "GoalColor".
Am I headed in the right direction to get make this dynamic colored box?
This script works but you must type "red" into the field(including quotation marks).  Any ideas on why the word red alone isn't triggering it? 
var vcolor = this.getField("GoalColor").value;
if (vcolor == "red") {
    this.getField('GoalColor').fillColor = color.red;
} else {
    this.getField('GoalColor').fillColor = color.white;
I have also tried - works if you type 'red'
var vcolor = this.getField("GoalColor").value;
if (vcolor == 'red') {
    this.getField('GoalColor').fillColor = color.red;
} else {
    this.getField('GoalColor').fillColor = color.white;
and  - does not work
var vcolor = this.getField("GoalColor").value;
if ( vcolor == red ) {
    this.getField('GoalColor').fillColor = color.red;
} else {
    this.getField('GoalColor').fillColor = color.white;
Thanks!

Answer 1

And you don't need to add the quotation marks in the text field. In fact, doing it will cause the script not to identify the word.