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>

displayy is not defined in the environment where you want to call it. — Felix Kling
– Felix Kling, Commented Mar 23, 2017 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
– 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.com/using-jquery-core/document-ready to get a better understand of when document.ready is necessary. — Felix Kling
– Felix Kling, Commented Mar 23, 2017 at 20:39

Pritam Banerjee · Accepted Answer · 2017-03-23 20:41:26Z

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, 2017 at 20:41

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bogdan Daniel Over a year ago

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 Over a year ago

But could you answer my question regarding your answer?

Pritam Banerjee Over a year ago

@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.

Community · Accepted Answer · 2017-05-23 12:17:36Z

1

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?

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 23, 2017 at 20:55

Jonathan Dion

1,67011 silver badges18 bronze badges

Comments

teaman · Accepted Answer · 2020-05-11 18:33:37Z

1

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.

answered May 11, 2020 at 18:33

teaman

112 bronze badges

Comments

X 47 48 - IR · Accepted Answer · 2020-02-09 06:20:46Z

0

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

answered Feb 9, 2020 at 6:20

X 47 48 - IR

1,5461 gold badge16 silver badges33 bronze badges

Comments

FrancescoMM · Accepted Answer · 2022-07-27 08:51:41Z

0

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

answered Jul 27, 2022 at 8:51

FrancescoMM

3,0101 gold badge21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Javascript external function from html gives 'function not defined'

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related