Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    javascript hide textarea.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <script>
    
    var link = GetElementById("CmtBox");
    
    
    	
    	function link() {
    		
    		
    		document.getElementById("comment").style.display = "none"; 
        			
            document.getElementById("comment").style.display = "";
    
    		 }
    	
    
    </script>
    
    
    </head>
    
    <body>
    <form action="test.html " method="post" title="Post Comment" >
    	<textarea cols="41" rows="5" wrap="hard" id="comment"></textarea>
    	<br /> 
        <br />
        <a id="CmtBox" onClick="link" href="#" >Comment</a>
    
    </form>
    
    </body>
    </html>
    I am trying to make a hyperlink reference a function but it isn't working. can someone please help me?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    <body>
    <form action="test.html " method="post" title="Post Comment" >
        <textarea cols="41" rows="5" wrap="hard" id="comment"></textarea>
        <br /> 
        <br />
        <a id="CmtBox" onClick="link" href="#">Comment</a>
    
    </form>
    <script>
    document.getElementById("CmtBox").onclick = function () {
        document.getElementById("comment").style.display = "none"; //hide or toggle visibility??
        return false; //cancel default link action
    };
    </script>
    </body>
    </html>

  • Users who have thanked glenngv for this post:

    bojak (09-24-2013)

  • #3
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't also don't know how to make it say "show" when the text area is hidden and "hide" when the text area is shown.

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Glenngv I tried and that code didn't seem to do anything. im not sure why it isn't.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts

  • #6
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    im assuming the reason it isn't working is because I didn't test it on a local server? do I really need to add the css to it?

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by bojak View Post
    im assuming the reason it isn't working is because I didn't test it on a local server?
    It could be because I forgot to remove the onclick in the html markup.

    Code:
    <a id="CmtBox" onClick="link" href="#">Comment</a>

    Quote Originally Posted by bojak View Post
    do I really need to add the css to it?
    Yes. The script adds/removes the css class name to hide/show the textarea.

  • #8
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    working example

    http://jsfiddle.net/hnaLJ/1/

    my code:

    http://pastebin.com/chuyYmXT

    a bit confused as they both look the same.

  • #9
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    works like a charm. although I don't really understand this code. if you could explain to me the code I would be so grateful. I don't like taking code from others I want to learn it.

  • #10
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
        comment.className = (/\bhide\b/).test(comment.className) ? '' : 'hide';
    that's the only part of code that I don't really understand. I think that's a regex?

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Yes. It checks if the class name contains 'hide' (whole word only). If it does, then it removes the class name, otherwise, add it.

    I improved the script a bit to ensure that other class names that the textarea may have will not be removed.

    http://jsfiddle.net/hnaLJ/4/

  • #12
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    how would I make the button work so that on page load it is hidden and when the link is clicked it shown and then clicked again it is hidden? how would change the links text to be displayed as "show comment" when the box is hidden and "hide" when the text area is visible?

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts

  • #14
    New Coder
    Join Date
    Sep 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    nicely done where are you calling the .test-class-only-not-required {
    color: red;
    } class from?

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    I added that class in the textarea for testing purposes only - to show that it is not removed when the 'hide' class is removed. You can remove it.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •