Question

I am working in JavaScript. I am facing an issue i.e. I want to place border around a div tag dynamically. My COde is Below:

function myfunction(var1) {
    if (document.getElementById(var1).style.border = "0px") {
        document.getElementById(var1).style.border = "1px solid green";
    } else {
        document.getElementById(var1).style.border = "0px";
    }
}

The code places border for first time but never removes it. i.e. else portion is not working.
Any help would be appreciated.

Answer 1

Your statement is incorrect. It should be…

function myfunction(var1) {
    if(document.getElementById(var1).style.border == "0px") {
        document.getElementById(var1).style.border = "1px solid green";
    } else {
        document.getElementById(var1).style.border = "0px";
    }
}

In JavaScript = is the assignment operator. For comparisons you should use the equality operator, ==.

Your statement assigns 0px to the element and then stops. The else will never fire because the assignment evaluates to true every time.

Comparison Operator             Example    Result
==  Equal To                    x == y     false
!=  Not Equal To                x != y     true
<   Less Than                   x < y      true
>   Greater Than                x > y      false
<=  Less Than or Equal To       x <= y     true
>=  Greater Than or Equal To    x >= y     false

As mentioned in the comments below, the identity operator (===) would actually be better than the equality operator (==). The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal. In this case a string is being compared with another string, so === could be used instead.