CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mahogan
Mahogan

Reputation: 63

Javascript not working for: onclick show hidden div from textarea

I am trying to allow a user to click in a textarea and when they start typing it shows an initially hidden div. Here is my script and html, but this does not work, not sure where I am going wrong.

    <head>
<script type="text/javascript">
document.getElementById("showPanel").onclick = function() {
    document.getElementById("thePanel").style.visibility = "visible";
}
</script>

</head>
<body>
<textarea name="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
<div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
</div>
</body>

</html>

Upvotes: 0

Views: 754

Answers (1)

user1135469
user1135469

Reputation: 1020

Just some minor changes based on what the guys have commented on above.

  • Added an id to the textarea

  • Moved JS script so that the the elements exist before you call the JS.

    <html>
  <head>
  </head>
  <body>
     <textarea name="showPanel" id="showPanel" rows="2" cols="35" style="position:absolute; left:0px; top:0px; width:300px; height:50px;"></textarea>
     <div id="thePanel" style="position:absolute;left:0px;top:100px;width:300px;height:200px;background: red; visibility:hidden;">
     </div>

     <script type="text/javascript">
        document.getElementById("showPanel").onclick = function() {
          document.getElementById("thePanel").style.visibility = "visible";
        }
     </script>

  </body>

</html>

Upvotes: 1

Related Questions