SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why doesnt the JavaScript close function work

    Hello,

    I have written a Javascript Close function, which upon being called closes the DIV name that it has been given.
    The function works fine in every page I have used it, but it is not working in the main sing-up page, here:

    https://www.anoox.com/news/sign_up.php

    The function is very simple, it is:

    function close(item) {
    document.getElementById(item).style.display = 'none';
    }


    And in above page, it is being called when for example you click on the No choice of the field:
    "Do you want to be informed when someone posts a Question that can be Answered by you? "

    So when you click on the Yes field, its sister function:

    function dispaly_hidden_div(item){
    document.getElementById(item).style.display = 'block';
    }

    correctly opens the DIV, but when you click on the No the Close function is not closing the DIV.


    I appreciate your input as to why the Close function is all of a sudden not working?

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You don't need 2 separate functions to show or hide the extra div. You can use just 1 function.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #radBtnsCont{
                    width: 50%;
                    float:right;
                }
                #flds1 {
                    width: 50%;
                }
                #divQ1 {
                    display: none;
                }
            </style>
        </head>
        <body>
            <form action="" method="post">
                <fieldset id="flds1">
                    <div id="radBtnsCont">
                        <label for="rad1">Yes</label><input type="radio" id="rad1" name="rad1[]" value="yes" /><br />
                        <label for="rad2">No</label><input type="radio" id="rad2" name="rad1[]" value="no" />
                    </div>
                    <label>
                        Do you want to be informed when someone posts a Question that can be Answered by you?
                    </label>
                </fieldset>
                <div id="divQ1">
                    Do you want to Answer Questions for Free or for a Fee? 
                </div>
            </form>
            
            <script type="text/javascript">
                var radBtns = document.getElementsByName('rad1[]');
                for(var i=0; i<radBtns.length; i++){
                    radBtns[i].onclick=function(){
                        document.getElementById('divQ1').style.display=(this.value == 'yes')? 'block' : 'none';
                    }
                }
            </script>
        </body>
    </html>

  3. #3
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for this Javascript sample code.

    But I really need to stick with JS that we have, so I would appreciate an answer to what the problem
    is with the JS in our page that is not all of a sudden closing the DIV.

    Regards,

    Quote Originally Posted by kennard View Post
    You don't need 2 separate functions to show or hide the extra div. You can use just 1 function.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #radBtnsCont{
                    width: 50%;
                    float:right;
                }
                #flds1 {
                    width: 50%;
                }
                #divQ1 {
                    display: none;
                }
            </style>
        </head>
        <body>
            <form action="" method="post">
                <fieldset id="flds1">
                    <div id="radBtnsCont">
                        <label for="rad1">Yes</label><input type="radio" id="rad1" name="rad1[]" value="yes" /><br />
                        <label for="rad2">No</label><input type="radio" id="rad2" name="rad1[]" value="no" />
                    </div>
                    <label>
                        Do you want to be informed when someone posts a Question that can be Answered by you?
                    </label>
                </fieldset>
                <div id="divQ1">
                    Do you want to Answer Questions for Free or for a Fee? 
                </div>
            </form>
            
            <script type="text/javascript">
                var radBtns = document.getElementsByName('rad1[]');
                for(var i=0; i<radBtns.length; i++){
                    radBtns[i].onclick=function(){
                        document.getElementById('divQ1').style.display=(this.value == 'yes')? 'block' : 'none';
                    }
                }
            </script>
        </body>
    </html>

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have overwritten a native function so the interpreter is refusing to call it. Rename it to something else like closeDiv.
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,027
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the Tip.
    That did the Job.

    What is strange is that same close() function name works in other pages, but in that sign_up.php page it did not until
    I changed to close_div as you had suggested.

    Weird!
    But thanX again.


    Quote Originally Posted by Logic Ali View Post
    You have overwritten a native function so the interpreter is refusing to call it. Rename it to something else like closeDiv.

    Anoox search engine volunteer

    www.anoox.com


Bookmarks

Posting Permissions

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