Else statement not executed javascript

Question

Hey Guys in the below code every time the if statement is executed no matter what the condition is.

function addRow(tableID) {

            var table = document.getElementById(tableID);
            if((document.getElementById('select_degree').style.visibility = 'hidden')&&(document.getElementById('select_degree')!=null)){
              document.getElementById('select_degree').style.visibility = 'visible';
              document.getElementById('select_ratings').style.visibility  = 'visible';
             }

            else{ 
            var rowCount = table.rows.length;
            var new_row = table.rows[rowCount-1];  


            var row = table.insertRow(rowCount);


            var colCount = table.rows[0].cells.length;




            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);


                newcell.innerHTML = new_row.cells[i].innerHTML;
            }
           }             
        }

When document.getelementById('add_degree') is null I get the error:

document.getElementById("select_degree") is null
addRow(tableID="add_degree")

But I already have a else statement if the element is null

Answer 1

Your if statement is not using the correct operator. Replace your = (used for assignment) with the comparison operator: ==. In addition, you must check if the element exists before attempting to check it's properties. If you don't, you'll get an exception when the element doesn't exist.

Here is your code, corrected and cleaned up:

function addRow(tableID) {
    var objSelectDegree = document.getElementById('select_degree');
    if (objSelectDegree != null && objSelectDegree.style.visibility == 'hidden') {
        objSelectDegree.style.visibility = 'visible';
        document.getElementById('select_ratings').style.visibility = 'visible';
    }
    else {
        // Moved table var to else block - it was not used unless else was hit
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var new_row = table.rows[rowCount - 1];
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = new_row.cells[i].innerHTML;
        }
    }
}​

Answer 2

At first check the null condition, this is basic law if something is present then proceed further , as in your case if element is not present it will throw undefined and nothing will work. even replace = with == in hidden part

Answer 3

This is why I love yoda conditionals. You're assigning a value (=) rather than evaluating it ==.

---

EDIT As suggested, I may point out that the order of checks in this particular statement is wrong. The check whether an element #select_degree exists should naturally occur before attempting to modify its properties.

However, given the element exists, the condition would still always evaluate true since the return value of the assignment (=) is used as an argument. As advocator for yoda conditionals, might I point out their advantage: for the following statement a syntax error would have been raised:

if ('hidden' = element.style.visibility)
{
// ...
}

Answer 4

in your if statement:

'=' should be '==' for starters

then:

(document.getElementById('select_degree').style.visibility == 'hidden')
&&
(document.getElementById('select_degree')!=null)

you check a property before checking if it is null, if you switch them around the program will check null first, and if it is, drop to else, and not check the second condition.

in this case, even if it is null, it is going to access .style.visibility

Answer 5

style.visibility = 'hidden' -> style.visibility == 'hidden'

<CODE>
function addRow(tableID) {

   var table = document.getElementById(tableID);
   if((document.getElementById('select_degree').style.visibility == 'hidden') && (document.getElementById('select_degree')!=null)){
     document.getElementById('select_degree').style.visibility = 'visible';
     document.getElementById('select_ratings').style.visibility  = 'visible';
   }

   else{ 
     var rowCount = table.rows.length;
     var new_row = table.rows[rowCount-1];
     var row = table.insertRow(rowCount);                
     var colCount = table.rows[0].cells.length;

     for(var i=0; i<colCount; i++) {     
       var newcell = row.insertCell(i);                    
       newcell.innerHTML = new_row.cells[i].innerHTML;
     }
  }             
}