JavaScript function not working

Hi there,

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

Here is the function:


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


    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.

Hi,

I think you’ll need to change the line that checks the textfield’s value to this:

if(document.getElementById('userDept').value == "OTHERS")

and you’ll need to include a display property if the other text field was previously hidden:

document.getElementById('otherDept').style.display = "block";

Here’s a quick example of a function that does what you describe above.
Maybe playing around with this will help you.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Show text area</title>
    <style>#hiddenTextArea{display:none;}</style>
  </head>

  <body>
    <textarea id="userDept"></textarea>
    <textarea id="hiddenTextArea"></textarea>

    <script>
      var t1 = document.getElementById('userDept');
      var t2 = document.getElementById('hiddenTextArea');

      t1.oninput = function(){
        if (t1.value == "OTHER"){
          t2.style.display = "block";
        };
      }
    </script>
  </body>
</html>