title: Javascript external function from html gives 'function not defined'
body: <p>I'm trying to call a function within the html page from an external loaded <code>index.js</code> file, but I always get</p>
  
  <pre><code>Uncaught ReferenceError: displayy is not defined
  </code></pre>
  
  <p>Inside my html page: </p>
  
  <pre><code> &lt;script type="text/javascript" src="index.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $( document ).ready(function() {
         displayy();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>index.js</code> file: </p>
  
  <pre><code>$( document ).ready(function() {
      alert('loaded');
        function displayy() {
      alert('executed');
      } 
   });
  </code></pre>
  
  <p>I've also tried:</p>
  
  <pre><code>&lt;script&gt;
      window.onload = function() {
          displayy();
      };
  &lt;/script&gt;
  
  &lt;script&gt;
  
      document.addEventListener("DOMContentLoaded", function(event) {
          displayy();
      });
  &lt;/script&gt;
  </code></pre>