Accessing public function in module pattern

JavaScript
1

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!

<!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

winodw.onload needs to be assigned a function, but you’re assigning it the result of calling alert. Try this instead:


window.onload = function () {
    alert(radioModule.getRadioValue());
};
3

Thank you! That solved my problem. Much appreciated.