title: Javascript function from external file not working
body: <p>I'm new to programming and currently learning javascript. I'm trying to test what I've learned so far using a payroll calculator, but my code is not working. I created a function that will be called when the user clicks a button; if I add the function inside the same HTML file, it works fine.  When the function is in my external javascript file, the function doesn't work.  I clicked on <em>View Page Source</em> to confirm the external javascript file was loaded and it was.</p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Payroll Calculator&lt;/title&gt;
      &lt;meta name="viewport" contect="width=devide-width, user-    scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;link rel="stylesheet" href="css/myStyle.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-xs-12"&gt;               
                  &lt;h1&gt;Payroll Calculator&lt;/h1&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div class="container"&gt;
          &lt;section class="main row"&gt;
              &lt;article class="col-xs-12 col-sm-6 col-md-6"&gt;
                  &lt;h3&gt;Employee&lt;/h3&gt;
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon" id="firstName"&gt;First Name&lt;/span&gt;
                      &lt;input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1"&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon" id="basic-addon1"&gt;Last Name&lt;/span&gt;
                      &lt;input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1"&gt;
                  &lt;/div&gt;
                  &lt;br&gt;                    
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon" id="rate-type"&gt;Rate Type&amp;nbsp&lt;/span&gt;
                      &amp;nbsp&lt;input type="radio" name="optradio"&gt;Hourly 
                      &lt;input type="radio" name="optradio"&gt;Salary
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;Rate Amount&lt;/span&gt;
                      &lt;input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"&gt;
                      &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
  
                  &lt;label id="EnterHours" onclick="enterHours()"&gt;Enter Hours&lt;/label&gt;
                  &lt;br&gt;
                  &lt;p id="hours"&gt;&lt;/p&gt;
                  &lt;br&gt;
  
                  &lt;label id="EnterEarnings"&gt;Enter Earnings&lt;/label&gt;
                  &lt;br&gt;
                  &lt;p id="earnings"&gt;&lt;/p&gt;
                  &lt;br&gt;                    
  
  &lt;button type="button" class="btn btn-default"    onclick="enterHours()"&gt;Calculate&lt;/button&gt;
  &lt;button type="button" class="btn btn-default"&gt;Cancel&lt;/button&gt;
  
  
              &lt;/article&gt;
  
              &lt;aside class="col-xs-12 col-sm-6 col-md-6"&gt;
                  &lt;h3 class="sidebar"&gt;Results&lt;/h3&gt;
              &lt;/aside&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;div class="container" &gt;
              &lt;h3&gt;Andres Quintero&lt;/h3&gt;
              &lt;p id="demo"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
  &lt;script src="js/app2.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Javascript Code</strong></p>
  
  <pre><code>$(document).ready(function(){
  
     function enterHours(){
         document.getElementById("hours").innerHTML = "This is a test";    
     }
  
  }
  </code></pre>