CODEWITHSUNDEEP
javascriptvariables
Sean
Sean

Reputation: 8731

JS if statement not working properly

I am working on this script, and for some reason, it is acting as if fn.style.borderColor always equals #F00. All I want is for the second one to execute if and only if the first if has been executed. 

function vfn() {
   if (fnl<1){
      na.innerHTML= "This field is required.";
      fn.style.borderColor="#F00";
   } 
   else if (fn.style.borderColor="#F00" && fnl>1) {
      if(lnl>1){
         na.innerHTML= "OK";
         setTimeout("na.innerHTML = ''",1500)
      }
      fn.style.borderColor="#0F0";
      setTimeout("fn.style.borderColor='';",1500)
   }
   return false
}

I tried using variables and did something like this, but it didn't work at all.

var error = 1
if (error = 1) {
    alert("error1");
    var error = 2
}
else if (error == "2") {
    alert("error2")
    var error = 1
}

So how can I make this work?

------------------------------------->>EDIT<<------------------------------------

Ok, so I changed it to this

  function vfn() {
      if (fnl<1){
        na.innerHTML= "This field is required.";
        fn.style.borderColor="#F00";
        }
      else if (fn.style.borderColor == "#F00" && fnl>1){
        if(lnl>1){
            na.innerHTML= "OK";
            setTimeout("na.innerHTML = ''",1500)}
        fn.style.borderColor="#0F0";
        setTimeout("fn.style.borderColor='';",1500)
        }

        return false}

and what's happening is that the border color is changed to red when the field is empty, which is what should happen, But when the field is filled in properly, it is SUPPOSED to change to green, then after 1.5 seconds, change back to default, but instead, what actually happens is that it stays red, as if it is ignoring the else if block of code, even though the field is already red (the fn.style.borderColor="#F00").

Upvotes: 0

Views: 227

Answers (2)

casablanca
casablanca

Reputation: 70721

Common mistake/typo: you're using = (assignment) instead of == (comparison). Change:

else if (fn.style.borderColor="#F00"

to

else if (fn.style.borderColor=="#F00"

Update: I would suggest trying your previous approach of using an extra variable, although you may have had a similar error there that caused it not to work before. Try storing a flag that indicates the state instead of explicitly comparing the borderColor, because the browser may change its internal representation from #F00 to something else:

var isRed = false;
function vfn() {
   if (fnl<1){
      na.innerHTML= "This field is required.";
      fn.style.borderColor="#F00";
      isRed = true;
   } 
   else if (isRed && fnl>1) {
      if(lnl>1){
         na.innerHTML= "OK";
         setTimeout("na.innerHTML = ''",1500)
      }
      fn.style.borderColor="#0F0";
      isRed = false;
      setTimeout("fn.style.borderColor='';",1500)
   }
  return false
}

Upvotes: 6

Kafu
Kafu

Reputation: 73

Try to make your else if look like this:

else if (fn.style.borderColor == "rgb(255, 0, 0)" && fnl>1){

Upvotes: 0

Related Questions