title: Javascript / Jquery variable scope issues
body: <p>I am currently having an 'interesting' issue where my functions and variables are being dropped out of scope / erroring as undefined under some peculiar circumstances. Particularly with the <code>CheckComplete</code> function.</p>
  
  <p>The following code works completely fine without any errors:</p>
  
  <pre><code>// JavaScript Document
  "use strict"
  
  $(document).ready(function() {
  
      var buttonsClicked = new Array();
  
      $(".screen .button-container &gt; div").each(function(){
          buttonsClicked.push(false);
      });
      $(".screen .button-container &gt; div").click(function(){
          $(".screen .information-container &gt; div").toggleClass("hidden",true);
          $(".screen .information-container &gt; div:eq("+$(this).index()+")").toggleClass("hidden",false);
          buttonsClicked[$(this).index()] = true;
          CheckComplete();
      });
  
      function CheckComplete()
      {
          var complete = true;
          for(var i = 0; i &lt; buttonsClicked.length; i++)
          {
              if(!buttonsClicked[i])
              {
                  complete = false;
                  break;
              }
          }
  
          if(complete)
          {
              Navigation.SetNextScreen("menu");
          }
      }
  }); 
  </code></pre>
  
  <p>However the strangest issue arises when I place the <code>CheckComplete</code> function <strong>outside</strong> of the <code>$(document).ready(){})</code> declaration. like so:</p>
  
  <pre><code>   // JavaScript Document
  "use strict"
  
  var buttonsClicked;
  
  $(document).ready(function() {
  
      buttonsClicked = new Array();
  
      $(".screen .button-container &gt; div").each(function(){
          buttonsClicked.push(false);
      });
      $(".screen .button-container &gt; div").click(function(){
          $(".screen .information-container &gt; div").toggleClass("hidden",true);
          $(".screen .information-container &gt; div:eq("+$(this).index()+")").toggleClass("hidden",false);
          buttonsClicked[$(this).index()] = true;
          CheckComplete();
      });
  }); 
  
  
  function CheckComplete()
      {
          var complete = true;
          for(var i = 0; i &lt; buttonsClicked.length; i++)
          {
              if(!buttonsClicked[i])
              {
                  complete = false;
                  break;
              }
          }
  
          if(complete)
          {
              Navigation.SetNextScreen("menu");
          }
      }
  </code></pre>
  
  <p>The <strong>first time</strong> I load the page this works completely fine. However when i press F5 or refresh the page via the button. I receive the following error when <code>CheckComplete()</code> is called: <code>ReferenceError: assignment to undeclared variable buttonsClicked</code>. Hereafter the no matter how many times the page is refreshed, it continues to error. This can only be solved when I close the tab/window and revisit the page. </p>
  
  <p>This script is loaded dynamically at run time, however I struggle to see how this would be affecting the functionality, when everything else in the script is working and I have completely disabled cache. Compounding my confusion this only occurs in Firefox...? </p>
  
  <p>It would be nice if someone could please shed some light on why this is the case, as defining all of my functions inside <code>$(document).ready(){}</code> doesn't appease my perfectionism and I wouldn't consider it syntactically correct either.</p>
  
  <h2>Update</h2>
  
  <p>@SandeepNayak was correct, the "use strict" statement was the culprit... I am perplexed as to why this would cause such an issue in Firefox and no other though ??????</p>