title: Uncaught Reference Error - one function works the other doesn't
body: <p>I've read a lot about uncaught reference errors here and think I have the idea down - when the script is trying to call a function or reference a variable that hasn't been initialized yet.  However, I am uncertain how to fix this, and why in my case one function works and the other doesn't.</p>
  
  <p>I have one JS file with two functions in it, and one HTML file with a form.  The form calls function1 onSubmit, and that works fine.  A radio button inside of the form calls function2 onClick, and that's when I get the error:</p>
  
  <pre><code>Uncaught ReferenceError: toggleGender is not defined onclick @ forms.html:20
  </code></pre>
  
  <p>Why would my first function work and not the second?  It seems to me like they are operating under the same premise.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function calculatePFT()
  {
    var userForm = document.getElementById('userValues');
    var pullups = userForm.userPullups.value;
    var crunches = userForm.userCrunches.value;
    var runMinutes = userForm.userMinutes.value;
    var runSeconds = userForm.userSeconds.value;
    
    var runScore = 0;
    
    if(runMinutes &lt; 18) { runScore = 100; }
    else
    {
      var minDiff = runMinutes - 18;
      var minPoints = minDiff * 6;
      var secPoints = Math.ceil(runSeconds/10);
      
      runScore = 100 - (minPoints + secPoints);
    }
    
    var score = parseInt(pullups*5) + parseInt(crunches) + parseInt(runScore);
    
    document.getElementById('scoreBox').innerHTML = "You scored " + pullups + " pullups and " + crunches + " crunches and a run time of " + runMinutes + " minutes " + runSeconds + " seconds.  TOTAL SCORE: " + score;
  }
  
  function toggleGender(var gender)
  {
    alert("Inside");
    var maleForm = document.getElementById('male');
    var femaleForm = document.getElementById('female');
    
    if(gender == "f")
    {
      alert("Female");
      maleForm.style.display = 'none';
      femaleForm.style.display = 'block';
    }
    else
    {
      alert("Male");
      maleForm.style.display = 'block';
      femaleForm.style.display = 'none';
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Javascript Testing&lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script src="scripts.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;section id="wrapper"&gt;
  
  &lt;h3&gt;PFT Calculator&lt;/h3&gt;
  
  &lt;form action="#" id="userValues" method="post" onSubmit="calculatePFT()"&gt;
  
    &lt;div id="gender"&gt;
      &lt;span class="maleFemale"&gt;Male &lt;input type="radio" name="maleFemale" value="male" CHECKED onClick="toggleGender('m')" /&gt;&lt;/span&gt;
      &lt;span class="maleFemale"&gt;Female &lt;input type="radio" name="maleFemale" value="female" onClick="toggleGender('f')" /&gt;&lt;/span&gt;
    &lt;/div&gt;
    
    &lt;div id="male"&gt;
      &lt;div class="scoreLine"&gt;
        &lt;div class="label"&gt;Pullups:&lt;/div&gt;
        &lt;div class="entry"&gt;&lt;input type="number" name="userPullups" min="0" max="20" default="18" class="scoreEntry" required /&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div id="female"&gt;
      &lt;div class="scoreLine"&gt;
        &lt;div class="label"&gt;Hang:&lt;/div&gt;
        &lt;div class="entry"&gt;&lt;input type="number" name="userHang" min="0" max="150" default="70" class="scoreEntry" required /&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="scoreLine"&gt;
      &lt;div class="label"&gt;Crunches:&lt;/div&gt;
      &lt;div class="entry"&gt;&lt;input type="number" name ="userCrunches" min="0" max="100" default="100" class="scoreEntry" required /&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="scoreLine"&gt;
      &lt;div class="label"&gt;Run (Minutes):&lt;/div&gt;
      &lt;div class="entry"&gt;&lt;input type="number" name="userMinutes" min="0" max="100" default="19" class="scoreEntry" required /&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="scoreLine"&gt;
      &lt;div class="label"&gt;Run (Seconds):&lt;/div&gt;
      &lt;div class="entry"&gt;&lt;input type="number" name="userSeconds" min="0" max="59" default="30" class="scoreEntry" required /&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div style="text-align:center;"&gt;&lt;input type="submit" value="Calculate Score!" id="submitButton" /&gt;&lt;/div&gt;
    
  &lt;/form&gt;
  
  &lt;span id="scoreBox"&gt;&lt;/span&gt;
  
  &lt;/section&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>