JavaScript function not working

**Php Beginner** · Jan 21, 2013 02:53

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.

**Pullo** · Jan 21, 2013 03:11

Hi,

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

Code JavaScript:

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

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

Code JavaScript:

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.

HTML Code:

<!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>

User Tag List

Thread: JavaScript function not working

Thread Tools

Display

JavaScript function not working

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions