title: Why can I call a javascript function from inside an event like onblur, but when I call the function at the bottom of <body> it becomes 'undefined'?
body: <p>Here's a basic example of what's happening. I can understand that I'm probably calling the function in body before it's defined but then why is it so common to put javascript at the bottom of the page? I know my boss is going to say use bottom javascript so what should I do?</p>
  
  <p>Also the root issue is when the page is first loaded, if there is a username from the server I need to run the CheckUsername() function. So is there a better way to do it conditionally?</p>
  
  <pre><code>&lt;body&gt;
      &lt;input type="text" name="username" 
          id="username" onblur="CheckUsername()" 
          maxlength="30" value="@username"  /&gt;
  
      @if (username.length &gt; 5) 
      {
           &lt;script&gt;
              CheckUsername(); // this is the one that's undefined
           &lt;/script&gt;
      }  
  
      @section bottomjavascript
      {
          &lt;script language="JavaScript"&gt;
  
              function CheckUsername() {
                  // does work
              }
  
          &lt;/script&gt;
      }
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>The actual body tags come from the master layout. But why can I use CheckUsername in the input tag, but I can't just call it on the page?</p>
  
  <p>I decided to just remove the @section bottomjavascript so it wouldn't move any scripts in there below the body tag.. Not really a solution since this page no longer uses the master section for javascript but it works now</p>