www.webdeveloper.com
Results 1 to 9 of 9

Thread: Can you pass DOM object in plain old JavaScript?

  1. #1
    Join Date
    Apr 2014
    Posts
    5

    Can you pass DOM object in plain old JavaScript?

    Hi, everyone,

    I have a question that is driving me BONKERS. Can DOM objects be passed from one function to another in plain JavaScript?

    For example, the following doesn't work:

    Code:
    function divLoading() {
        var obj = document.getElementById("loadingprogress");
        return obj;
    }
    
    function divLoadingHide() {
        divLoading.style.visibility = "hidden";
    }
    What am I missing?

    Thanks,

    Randy

  2. #2
    Join Date
    Oct 2013
    Posts
    559
    Yes. One example:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>hide content</title>
    <script>
    function divLoading() {
        var obj = document.getElementById("loadingprogress");
        divLoadingHide(obj);
    }
    
    function divLoadingHide(o) {
        o.style.display = "none";
    }
    </script>
    </head>
    
    <body>
    <div id="loadingprogress">
    some content
    </div>
    <input type="button" onclick="divLoading()" value="Hide content"/>
    </body>
    </html>
    And another, passing the ID from the HTML to the script:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>hide content</title>
    <script>
    function divLoading(obj) {
        divLoadingHide(obj);
    }
    
    function divLoadingHide(o) {
        o.style.display = "none";
    }
    </script>
    </head>
    
    <body>
    <div id="loadingprogress">
    some content
    </div>
    <input type="button" onclick="divLoading(loadingprogress)" value="Hide content"/>
    </body>
    </html>
    Last edited by Kevin2; 04-03-2014 at 02:11 PM. Reason: added 2nd example

  3. #3
    Join Date
    Apr 2014
    Posts
    5
    Hi, Kevin,

    Thanks for the response, your example does work, but why can't I call a DOM object via a function call like:

    Code:
    function divLoading() {
        var obj = document.getElementById("loadingprogress");
        return obj;
    }
    It seems like that divLoading should return the DOM object, but why doesn't it? I'd like to consolidate and simplify naming in a large JavaScript file I have.

    Randy

  4. #4
    Join Date
    Mar 2009
    Posts
    512
    but why can't I call a DOM object via a function call like: ...
    You can. I suspect your problem is that you are invoking this function BEFORE the DOM is fully loaded, or you have a typo so that the id of the element you are trying to access is not the id you have actually given it.

  5. #5
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    The JavaScript snippet you provided would work, so the issue is with the rest of the code you're not showing. If there is an error, other than a logical one, check the error console, such as through Chrome. If there are no error messages in there whatsoever, then can you provide more of the file?

  6. #6
    Join Date
    Apr 2014
    Posts
    5
    Hi, Tcobb,

    If I can, can you explain why doesn't this function call work, throwing the error: "Uncaught TypeError: Cannot set property 'visibility' of undefined." It seems that JS doesn't pass the type as a DOM ELEMENT when it passes the object.

    How do I define the DOM ELEMENT type for this function call? I don't understand why the following aren't functionally equivalent and how to fix it. I've included the fully function "standard" way of doing it in the code below. Can you explain this?

    Thanks,

    Randy

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript">
                function divLoading() {
                    var obj = document.getElementById("loadingprogress");
                    return obj;
                }
                function divLoadingHide() {
                    divLoading.style.visibility = "hidden"; // doesn't work
                }
                function divLoadingHideStandardWay() { 
                    var obj = document.getElementById("loadingprogress");
                    obj.style.visibility = "hidden"; // works
                }
            </script>
            <style type="text/css">
                div#loadingprogress {
                    position: fixed; 
                    z-index: 99; 
                    left: 0px; 
                    top: 0px; 
                    width: 100%; 
                    height: 100%; 
                    color: #D7C9D5;
                    background-color: black;
                    opacity: 0.8;
                    filter: alpha(opacity=80);
                }
            </style>
        </head>
        <body>
            <div id="loadingprogress">
                <div>
                    <p>Please Wait...</p>
                    <p><input type="button" id="btnButton" value="Hide" onclick="divLoadingHide();" />&nbsp;&nbsp;&nbsp;
                        <input type="button" id="btnButton2" value="Hide Standard Way" onclick="divLoadingHideStandardWay();" /></p>
                    <p></p>
                </div>
            </div>
        </body>
    </html>

  7. #7
    Join Date
    Apr 2014
    Posts
    5
    Hi, Error404,

    I've posted the code with both working and not working code. Can you explain why they are not equivalent?

    Thanks,

    Randy

  8. #8
    Join Date
    Mar 2009
    Posts
    512
    You never called the divLoading function. Instead you treated it as a DOM object in your code.

    Code:
            function divLoadingHide() {
                    var x = divLoading();  //changes
                    x.style.visibility = "hidden"; 
                }

  9. #9
    Join Date
    Apr 2014
    Posts
    5
    Nice! Ok, than you for that. I was treating the function as an object. Thank you! I appreciate your time!

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles