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>

See here: http://stackoverflow.com/questions/9384758/what-is-the-execution-context-in-javascript-exactly — Schlaus, Mar 23 '17 at 20:33
`displayy` is not defined in the environment where you want to call it. — Felix Kling, Mar 23 '17 at 20:36
@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, Mar 23 '17 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 https://learn.jquery.com/using-jquery-core/document-ready/ to get a better understand of when document.ready is necessary. — Felix Kling, Mar 23 '17 at 20:39
just define your displayy outside of the event handler of the ready event. — Zri, Mar 23 '17 at 20:39
@FelixKling yeah, I had it inside the html at first, but it s sort of long so I decided to move it inside `index.js`, but I guess I ll keep it in html. — Bogdan Daniel, Mar 23 '17 at 20:40
You can put it in `index.js`. Just not inside `$( document ).ready(function() { })`. There is no reason to do that. See the link in my previous comment. — Felix Kling, Mar 23 '17 at 20:41

score 1 · Accepted Answer · answered Mar 23 '17 at 20:41

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>

answered Mar 23 '17 at 20:41

Pritam Banerjee

17,953
10
93
108

1

Yeah. I feel so stupid. I do it like this in all of my other files. No idea why I went full r.. and tried to do it the way I posted. Just tired. Thank you. I ll accept your answer cause it is the right one. But why is it working though? You call the function before defining it. – Bogdan Daniel Mar 23 '17 at 20:58
But could you answer my question regarding your answer? – Bogdan Daniel Mar 23 '17 at 21:52
@BogdanDaniel You can call the function even before you define it. That does not matter. But you will need to make sure that you define it in the same scope. When you were calling it from the html, it may be it was not loaded at that time. But if you call it from the same scope, you can call it even before you define it. – Pritam Banerjee Mar 23 '17 at 21:54

score 1 · Answer 2 · edited May 23 '17 at 12:17

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?

score 1 · Answer 3 · answered May 11 '20 at 18:33

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 become global in scope.

score 0 · Answer 4 · answered Feb 09 '20 at 06:20

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. :)

score 0 · Answer 5 · answered Jul 27 '22 at 08:51

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

Javascript external function from html gives 'function not defined'

5 Answers5