SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Austin
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    accessing public function in module pattern

    Hi All!
    I'm trying to learn to organize my code better. I'm playing around with the module pattern and will be trying others as well.
    I don't believe it is a scope issue. The idea is to get the value of a radio button and alert that value when the page is loaded (not practical, just for learning).
    The variable that will store that value is private, but is accessed and then returned by a public function. I then call that function from window.onload.
    If the code below is executed, it produces 'undefined' in alert box as opposed to showing the value of the radio button.

    But that is only where my confusion begins. If I change the line that reads return radioSelection; t0 alert(radioSelection);, and then change the window.onload statement to simply window.onload=radioModule.getRadioValue;, everything works just fine. Note the absence of the parentheses after the function call. If I add those in, the alert displays undefined (I think this may be due to the way it is interpreted as an anonymous function).

    Can someone help me understand this behavior. I feel like I can move on and make it work, but I think there are some lessons I need to learn here. Thanks for your time!


    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Example Module App!</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script>
               var radioModule = (function()
                {
                    //private variables
                    var radioArray = document.getElementsByName('radioOption'),
                    radioSelection;
                    return {
                        //public methods
                        getRadioValue : function()
                        {
                            for(i=0; i < radioArray.length; i++)
                            {
                                if (radioArray[i].checked === true)
                                {
                                    radioSelection = radioArray[i].value;
                                }
                            }
                            return radioSelection;
                        }
                    };
                })(); // end module
                window.onload = alert(radioModule.getRadioValue());
            </script>
        </head>
        <body>
            <div id="mainContainer">
            <div id="header">
                <h1>Example Module App!</h1>
            </div>
            <div>
                <form action="" name="splitBills" method="post">
                    <input type="radio" id="option1" name="radioOption" value="evenSplit" checked="checked" /> Option 1
                    <input type="radio" id="option2" name="radioOption" value="byIncome" />Option 2<br /><br />
                </form>
            </div>
            </div>
        </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,246
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    winodw.onload needs to be assigned a function, but you're assigning it the result of calling alert. Try this instead:

    Code JavaScript:
    window.onload = function () {
        alert(radioModule.getRadioValue());
    };

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Austin
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! That solved my problem. Much appreciated.


Tags for this Thread

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
  •