Javascript external function from html gives 'function not defined'

Question

I'm trying to call a function within the html page from an external loaded index.js file, but I always get

Uncaught ReferenceError: displayy is not defined

Inside my html page:

 <script type="text/javascript" src="index.js"></script>

<script>
    $( document ).ready(function() {
       displayy();
    });
</script>

The index.js file:

$( document ).ready(function() {
    alert('loaded');
      function displayy() {
    alert('executed');
    } 
 });

I've also tried:

<script>
    window.onload = function() {
        displayy();
    };
</script>

<script>

    document.addEventListener("DOMContentLoaded", function(event) {
        displayy();
    });
</script>

Answer 1

You need not run displayy again from the script. The following works:

$(document).ready(function() {
      alert('loaded');
      displayy();
      function displayy() {
        alert('executed');
      } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>