Hi there,


I have a javascript function which I do not know why is it not working.

Here is the function:
Code:
detailTableDept.prototype.changeVisibility = function()
{
  if(document.getElementById('userDept') == "OTHERS"){
  //show
  document.getElementById('otherDept').style.visibility = "visible";
  document.getElementById('otherDept').style.display = "";
  }else{
  //hide
  document.getElementById('otherDept').style.visibility = "hidden";
  document.getElementById('otherDept').style.display = "none";
  document.getElementById('otherDept').value ="";
  }
  this.renderDetailTableDept();
}
HTML code

HTML Code:
    segTable += "<tr>"; else segTable += "<tr class='trAlt2'>";
    segTable += "<td>"+no+".</td>";
    segTable += "<td nowrap width='50%'>";
    segTable += '<textarea name="'+userDept+'" id="'+userDept+'" style="height:40px;" size = "95" maxlength = "95" onChange="detailTableDept.changeValue('+i+',\'userDept\',this.value);   detailTableDept.changeVisibility();">'+userDeptSelected+'</textarea></td>';
    segTable += "<td nowrap width='50%'>";
    segTable += '<textarea name="'+otherDept+'" id="'+otherDept+'" style="height:40px; visibility:hidden;" size = "95" maxlength = "95" onChange="detailTableDept.changeValue('+i+',\'otherDept\',this.value);">'+otherDeptSelected+'</textarea></td>';
    segTable += "<td><input type=\"button\" name=\"Remove\" value=\"X\" onClick=\"detailTableDept.remove('"+i+"', false);\" class=\"remove\"></td>";
    segTable += '</tr>';
I need to hide and display the second textarea based on the value enter on the 1st textarea. The purpose of the js function above is to display the 2nd textarea when the value of "OTHERS"
entered into the 1st textarea, or else hide the 2nd textarea.

But the javascript is not functioning as I want it to.

Please advise. Thanks in advance.