www.webdeveloper.com
Results 1 to 5 of 5

Thread: comment box upon clicking button

  1. #1
    Join Date
    Feb 2011
    Location
    London
    Posts
    62

    comment box upon clicking button

    Hi guys,
    I am really new to JS (literally just starting looking into it) and I was wondering if anybody could help me or give any suggestion as to how build a comment box which appear when a user click on the comment button.
    Now I had a stab at that but my JS skills are still really poor. Here's what I came up with after sometime looking around on the net and getting (or at least trying to) action some suggestions I managed to get here and there:
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    
    div.hidden
    {
    display: none;
    
    }
    
    div.visible
    {
    display: block;
    
    }
    
    
    .comment_box
    
    {
    border-style:solid;
    border-width:1px;
    float:left;
    background-color:#d4d4cb;
    width:280px;
    padding-left:20px;
    padding-top:25px;
    padding-bottom:10px;
    }
    
    </style>
    
    
    
    <script type="text/javascript">
    function showCommentBox()
    {
    alert("hello");
    var box = document.GetElementById('comment') ;
    
    
    }
    
    </script>
    
    </head>
    <body>
    
    
    
    
    <input type="button" value="Comment" onclick="showCommentBox()"><br />
    
    <div class="hidden" id="comment">
    <form action="mailto:myemail@domain.com" method="post">
    <p>Comments and suggestions:<br><textarea name="comments" rows="3" cols="30"></textarea><br><br>
    
    <input type="submit" value="Send"></p>
    </form>
    
    </div> <!-- end of comment_box-->
    
    </body>
    </html>
    Any suggestion, even if I have to rewrite the whole thing from scratch will be appreciated

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    div.hidden{
    display: none;
    }
    div.visible{
    display: block;
    }
    .comment_box{
    border-style:solid;
    border-width:1px;
    float:left;
    background-color:#d4d4cb;
    width:280px;
    padding-left:20px;
    padding-top:25px;
    padding-bottom:10px;
    }
    </style>
    <script type="text/javascript">
    function showCommentBox(){
    var div=document.getElementById('comment');
    div.className='visible';
    }
    </script>
    <body>
    <form action="mailto:myemail@domain.com" method="post">
    <input type="button" value="Comment" onclick="showCommentBox()"><br>
    <div class="hidden" id="comment">
    <p>Comments and suggestions:<br><textarea name="comments" rows="3" cols="30"></textarea><br><br>
    <input type="submit" name="sub" value="Send"></p>
    </div>
    </form>
    </html>
    I have also corrected some HTML errors you have made, take care.

  3. #3
    Join Date
    Feb 2011
    Location
    London
    Posts
    62

    Smile

    hi Kor,
    thanks for that.
    About the HTML errors, well the comment box belong to a wider project of mine, so I didn't really post the whole HTML page cos I thought there was no need for that, which is why it's got few things missing like the doctype etc. I only included the relevant bit, but thanks for that anyway .

    Now about the Java script, by looking at the code you posted it was actually easier than I thought, but I got a bit confused I think.
    Anyway just to make sure I understand what you've done:

    <script type="text/javascript">

    /*function */
    function showCommentBox(){
    var div=document.getElementById('comment'); /* the variable div will contain the comment box which is called by the getElementById() - I can see that I mispelled it in my original code - */

    div.className='visible'; /* I suppose this makes sure that the box becomes visible again but not sure how that happens. Is that div referring to the div container isn't it and not to the var div=document.getElementById('comment'); we used few lines above? Also what's className? where did it come from I can't see it declared anywhere*/

    }
    </script>
    <body>
    <form action="mailto:myemail@domain.com" method="post">
    <input type="button" value="Comment" onclick="showCommentBox()"><br>
    <div class="hidden" id="comment">
    <p>Comments and suggestions:<br><textarea name="comments" rows="3" cols="30"></textarea><br><br>
    <input type="submit" name="sub" value="Send"></p>
    thanks

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    div.className='visible'; /* I suppose this makes sure that the box becomes visible again but not sure how that happens. Is that div referring to the div container isn't it and not to the var div=document.getElementById('comment'); we used few lines above? Also what's className? where did it come from I can't see it declared anywhere*/
    div is the same var div declared above - it is the reference of the object. When declare a new variable you must use the token var. But next time when you use it, you must omit it.
    className is the JavaScript reference of the css class. It will read the class of an element or it will write it.
    Last edited by Kor; 02-18-2011 at 10:36 AM.

  5. #5
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    So
    className is the JavaScript reference of the css class
    which means that
    HTML Code:
    div.className='visible';
    is effectively saying "assign the class name visible to the DIV" or something like that.

    ABout the whole java script then, the structure is:
    -create the function
    -create a variable that contains the comment box (which will be gotten by the getElementById method) then apply the visible CSS on the DIV variable that contains the comment box. Correct? (sorry but as I said being the first time I attempt to make a java script I would like to get everything clear )

    cheers

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles