Text field color change delay

i am trying to create a form to that has a text field change color to either green or red depending on the calculation of values from two other text boxes. at first i had consecutive If Else statements and the calculation would work but the color change would seem to be delayed.  . say the range of values to turn the fill color green is 19 - 26, if i type in 19 the color wont change
to green. but when i type in 20 it does change green and if i go down to 18 it stays green.  is this issue because i had consecutive If Else statements?

var f = event.value; 
var wpds = this.getField("wpds1").value;
var dia = this.getField("dia1").value;
var pass = this.getField("pass1").value;
var Distance = this.getField("Distance").value ;
var Time = this.getField("Time").value ;
var Travel_Speed = Distance / Time * 60;

if (Distance > 0 && Time > 0){this.getField("travelSpeed").value = Travel_Speed ;}
else { this.getField("travelSpeed").value = ""}

if (wpds == "UB36")
   {
    if (pass == "Root" || pass == "Hot")
               {
               if (dia == "3/32")             
                              {
                              if(f >= 18 && f < 29) {event.target.fillColor = ["RGB",0.800,1,0.800] ;} 
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}    
                              }

                else if (dia == "1/8")             
                              {
                              if(f >= 19 && f < 31) {event.target.fillColor = ["RGB",0.800,1,0.800] ;} 
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}    
                              }
                else if (dia == "5/32")
                              {
                              if(f >= 21 && f < 32) {event.target.fillColor = ["RGB",0.800,1,0.800] ;}
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}
                              }
                }

    else if (pass == "Fill" || pass == "Cap")
             {
             if (dia == "3/32")             
                              {
                              if(f >= 18 && f < 25) {event.target.fillColor = ["RGB",0.800,1,0.800] ;} 
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}    
                              }

                else if (dia == "1/8")             
                              {
                              if(f >= 19 && f < 27) {event.target.fillColor = ["RGB",0.800,1,0.800] ;} 
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}    
                              }

                else if (dia == "5/32")
                              {
                              if(f >= 21 && f < 29) {event.target.fillColor = ["RGB",0.800,1,0.800] ;}
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}
                              }

                else if (dia == "3/16")
                              {
                              if(f >= 22 && f < 31) {event.target.fillColor = ["RGB",0.800,1,0.800] ;}
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}
                              }
                else if (dia == "7/32")
                              {
                              if(f >= 23 && f < 33) {event.target.fillColor = ["RGB",0.800,1,0.800] ;}
                              else  {event.target.fillColor = ["RGB",1,0.700,0.700]}
                              }
                }
    }