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>

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>

• javascript
• jquery
• html

• See here: stackoverflow./questions/9384758/… – Schlaus Commented Mar 23, 2017 at 20:33
• displayy is not defined in the environment where you want to call it. – Felix Kling Commented Mar 23, 2017 at 20:36
• @FelixKling and how do I define it there? – Bogdan Daniel Commented Mar 23, 2017 at 20:37
• @FelixKling if there is no easy way to do that that, I can just move the entire displayy function inside the html script tag and run it from there. That way it's working. – Bogdan Daniel Commented Mar 23, 2017 at 20:38
• Either move the function definition to where to call the function or define the function in global scope. "I can just move the entire displayy function inside the html script tag and run it from there." Yes, then it's defined in global scope. There is no reason to put the declaration inside the the document.ready callback. Have a look at learn.jquery./using-jquery-core/document-ready to get a better understand of when document.ready is necessary. – Felix Kling Commented Mar 23, 2017 at 20:39

5 Answers 5

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Inside your index.js you can call your function using the window object.

window.displayy = function(){ 
    return "hello!" 
}

and then you call it window.displayy(); or displayy();

A better solution is to declare your function in the higher scope like this:

var displayy;

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

N.B: Using global variables are bad but it should solve your problem. Please take a look here: I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?

Remove the document.ready wrapper in the .js file.

I ran into this problem, too. I had the call to the function in my main html file inside a document.ready and the external .js file was also wrapping the called function definition inside a document.ready function. Once I removed that wrapper in the .js file, it worked fine. This allowed the functions in the external .js file to bee global in scope.

Attach your functions to the window object. Something like this:

// Set the container!
window.app = {};

// Define the function.
window.app.say_hello = function(name) {
   alert(`Hello ${name}`);
};

// Call the function.
app.say_hello("Iran");

I tried everything. Only this solution worked. :)

You define the function on DOM ready, and this is useless and wrong.

Use the DOM ready event when you call your function, not when you define it:

Make sure they exist before the DOM is ready, then call them when DOM ready event is received.

So:

• function definition -> at start (no need to wrap into event handler)
• calling function -> at DOM ready

not the opposite