Can't invoke function from external javascript file

Question

My java script file is referenced in the body of my base template:

<body>
...
<script type="text/javascript" src="/static/js/test.js"></script>
</body>

I an another template which extends the base template, the java script function draw() defined in test.js can be invoked by using the onclick Event. Sadly I only get a picture when clicking over the canvas area. But invoking the function by <script> draw(); </script> occurs the following error: ReferenceError: draw is not defined How can this possibly be?

...  
<div class="panel-body">
  # works perfectly fine, somehow the function can be accessed
  <canvas id="canvas" onclick="draw()" width="300" height="10"></canvas>
  # occurs an error, somehow the function can't be accessed anymore...
  <script> draw(); </script>
</div>
...

I use python flask framework for back end programming.

you should look the $(document).ready()...

EugenSunic
– EugenSunic

2015-09-12 15:31:06 +00:00
Commented Sep 12, 2015 at 15:31 — EugenSunic
– EugenSunic, Commented Sep 12, 2015 at 15:31

Mingle Li · Accepted Answer · 2015-09-12 15:28:30Z

1

Because you initialized the <script> at the end of the webpage, and you call draw() before it's initialized.

I would put it in the head tag:

<head>
    ...
    <script type="text/javascript" src="/static/js/test.js"></script>
</head>

You said that for the onclick it works, of course it works, when you click on the canvas the draw() function is already initialized.

answered Sep 12, 2015 at 15:28

Mingle Li

1,4001 gold badge15 silver badges40 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:44:18Z

1

The order of the script is what matters here. Scripts are loaded in the order encountered in the page.

Since "draw()" is a direct call, I presume this is defined before the tag in the body, so this why the browser says it is not defined. On the other hand, the onClick of the canvas can happen only after the page is loaded, so that's why it is working there.

I recommend to put the javascripts of a specific page below the scripts of the base template somehow (you have to use maybe you'll need two separate references for that), or you can use other techniques like JQuery's $(document).ready().

Here is a very similar question, hope that helps: load and execute order of scripts

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Sep 12, 2015 at 15:31

gabowsky

6525 silver badges13 bronze badges

Comments

Yehonatan · Accepted Answer · 2015-09-12 15:34:37Z

1

Why won't you wait for the document to load? That would be the proper solution to this problem.

document.addEventListener('load',  function (){
    draw();
});

Sorry about the ugly indentation, I'm using my phone

answered Sep 12, 2015 at 15:34

Yehonatan

3,2357 gold badges34 silver badges39 bronze badges

2 Comments

ericMTR Over a year ago

@ Yehonatan Well this works only for the template with the defined canvas in it. all other templates get following error: TypeError: Cannot read property 'getContext' of null

Yehonatan Over a year ago

Well, I haven't seen you draw code but I'm pretty sure that you've done some getElementById and for that you need the element to exist.

Collectives™ on Stack Overflow

Can't invoke function from external javascript file

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related