How to call an external function internally in javascript?

Question

I am relatively new to JavaScript so this might be somewhat trivial. However I can't seem to find the answer to this question.

Say I have a JavaScript file (bar.js) with a function in it called foo(). I want to call this function (foo) inside a script tag. I would like it to work like so.

<script type="text/javascript" src="bar.js"> 
  foo();
</script>

I am not able to get this to work. I have ran the JavaScript console with my browser and what it seems to be doing is...nothing. No syntax errors or anything.

I can run a function similarly with a button click...using the script tag above and this.

<button type="button" onclick="foo();">Click Me</button>

I could do it this way, but in the actual circumstance I need to pass parameters into the function that is being called on the button click. I can't get those recognized either. I'm sure that something to do with scope.

The way I tried this was like so...

<script type="text/javascript" src="bar.js">
  var a = "blah";
  var b = "blab";
</script>

.... (some more html)

<button type="button" onclick="foo(a,b);">Click me </button>

Here I get that a is undefined. Which leads me to think that it is a scope problem. The script tag is in the head section and the button is in the body section. Can you put script tags outside of the head and body tags to make global data?

Thanks for the help in advance.

I have never used jsfiddle before and was having trouble getting it to work so I'll just post and example code here.

<html>
  <head>
    <script type="text/javascript" src="bar.js">
    </script>
    <!--From what yall say I should have another script
       tag here for anything else. Say some variable?-->
    <script type="text/javascript">
      var a = "hello";
      var b = "text";
    </script>
  </head>
  <body>
    <!--This should work now?-->
    <button type="button" onclick="foo(b,a)">
      Click me
    </button>
  </body>
</html>

bar.js contents:

function foo(id,string){
  document.getElementById(id).innerHTML = string;
}

I got this to work. Thanks everyone.

Related: [Inline Script with SRC Attribute?](http://stackoverflow.com/questions/1056325/javascript-inline-script-with-src-attribute) — Jonathan Lonowski, Jan 26 '15 at 21:36

Darin Dimitrov · Accepted Answer · 2015-01-26T21:37:05.180

2

You need to first include the javascript containing the function:

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

and then call it in another script tag:

<script type="text/javascript">
    foo();
</script>

In your example you seem to have mixed 2 notions into a single script tag which is invalid: include an external javascript file and in the body of the script tag write your code.

According to the specification:

The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.

So basically you should avoid such situations and have separate script tags for including external files and for writing inline js.

edited Jan 26 '15 at 21:37

answered Jan 26 '15 at 21:30

Darin Dimitrov

1,023,142
271
3,287
2,928

so you can't link and call in the same script tag? – Noah Herron Jan 26 '15 at 21:30
1

That doesn't explain why the version that calls it from a button doesn't work. – Quentin Jan 26 '15 at 21:31
1

No, you can't, you should do this in 2 separate script tags. – Darin Dimitrov Jan 26 '15 at 21:31
@quentin, In this version he also mixed into a single `script` tag the inclusion of `bar.js` and inline script body. – Darin Dimitrov Jan 26 '15 at 21:32
1

@DarinDimitrov — There are three sets of code in the question. This answer explains why sets 1 and 3 do not work. It doesn't explain why set 2 doesn't work. – Quentin Jan 26 '15 at 21:33
@Quentin, actually the OP said that set 2 works, which is weird IMHO as it shouldn't have worked if his script inclusion looks as the first example. – Darin Dimitrov Jan 26 '15 at 21:36
Oooh, you're right. I misread that bit. It should work. The external script is loaded. The inline script is ignored. – Quentin Jan 26 '15 at 21:36
1

You are correct, I have updated my answer to reference the specification which states exactly what you said. If you have both src attribute and inline body, only the external script is loaded and the body is ignored. – Darin Dimitrov Jan 26 '15 at 21:38

How to call an external function internally in javascript?

1 Answers1