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!
<title>Example Module App!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
var radioModule = (function()
var radioArray = document.getElementsByName('radioOption'),
getRadioValue : function()
for(i=0; i < radioArray.length; i++)
if (radioArray[i].checked === true)
radioSelection = radioArray[i].value;
})(); // end module
window.onload = alert(radioModule.getRadioValue());
<h1>Example Module App!</h1>
<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 />