49

I have the following two javascript functions:

1 

showCountry()

2 

showUser()

I would like to put them in external ".js" files

1

<a href="javascript:showCountry('countryCode')">countryCode</a>

2

<form>
 <select name="users" onChange="showUser(this.value)">
 <option value="1">Tom</option>
 <option value="2">Bob</option>
 <option value="3">Joe</option>
 </select>
</form>

What is the correct syntax to call these functions?

blsn
  • 1,077
  • 3
  • 18
  • 38
  • 3
    Create a separate js file in which put these functions or whatever code you want to write and mention `src` in your script tag like this ``. – Lion Jul 16 '12 at 04:31
  • 2
    you should load the external js file before calling function. – Shreedhar Jul 16 '12 at 04:32
  • 1
    `document.getElementById('users').addEventListener('change', showUser, false);` in a separate JavaScript file would be better than `onchange`. – uınbɐɥs Jul 16 '12 at 06:00
  • Note: Point to the external script file exactly where you would have written the script. [w3schools.com - HTML – Guy Coder Jun 25 '17 at 14:24
  • 3
    I know this is an old post(5+ years), but being a top result in Google I thought it necessary to add this. According to W3Schools you reference the script where you would normally write the script, according to others you reference it in head, but this can cause issues. I've read and found very useful to reference the external script at the bottom of the document right before the body end tag. This allows the entire contents of body to be loaded before running any scripts, thereby preventing a script to be run on an element(s) that don't yet 'exist'. – mrkd1991 Sep 17 '17 at 00:36
  • How would you call an external JavaScript file from an external JavaScript file? In other words, we'd like to minimize how many JS calls are in our head section. – user3120861 Aug 27 '18 at 13:56

6 Answers6

59

Code like this 

 <html>
    <head>
          <script type="text/javascript" src="path/to/script.js"></script>
          <!--other script and also external css included over here-->
    </head>
    <body>
        <form>
            <select name="users" onChange="showUser(this.value)">
               <option value="1">Tom</option>
               <option value="2">Bob</option>
               <option value="3">Joe</option>
            </select>
        </form>
    </body>
    </html>

I hope it will help you.... thanks

Jalpesh Patel
  • 3,150
  • 10
  • 44
  • 68
  • 1
    Thank you all for replying to me. Thank you Jalpesh Patel for your quick and effectively solution. – blsn Jul 16 '12 at 04:50
  • Probably changed now, but i put the at the bottom of the body. Anywhere else and it didn't seem to work ? – nora Feb 08 '17 at 16:08
  • @nora Can you please put your code on SO? I think there is some mistake in code. – Jalpesh Patel Feb 09 '17 at 03:26
  • @Jalpesh http://pastebin.com/dcjiRPDL I stuck it in a paste bin, as it probs wouldn't work well in this comment. – nora Feb 09 '17 at 09:40
  • @nora is your issue is fixed?? – Jalpesh Patel Feb 20 '17 at 05:15
  • Yeah, realised that I was using things in the JavaScript which were required to be created before the script was called, so it was forced to be underneath the list. – nora Feb 21 '17 at 02:19
21

Note :- Do not use script tag in external JavaScript file.

<html>
<head>

</head>
<body>
    <p id="cn"> Click on the button to change the light button</p>
    <button type="button" onclick="changefont()">Click</button>

     <script src="external.js"></script>
</body>

External Java Script file:-

        function changefont()
            {

                var x = document.getElementById("cn");
                x.style.fontSize = "25px";           
                x.style.color = "red"; 
            }
Sachindra N. Pandey
  • 1,177
  • 17
  • 15
6

In your head element add

<script type="text/javascript" src="myscript.js"></script>
walrii
  • 3,472
  • 2
  • 28
  • 47
  • 4
    .. and otherwise the usage in your html files is unchanged. However, you can change to "unobtrusive javascript" style - where functionality is attached to your html within your script, rather than inline in your html. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript – Julian Jul 16 '12 at 04:32
4

This is the way to include an external javascript file to you HTML markup.

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

Where external-javascript.js is the external file to be included. Make sure the path and the file name are correct while you including it.

<a href="javascript:showCountry('countryCode')">countryCode</a>

The above mentioned method is correct for anchor tags and will work perfectly. But for other elements you should specify the event explicitly.

Example:

<select name="users" onChange="showUser(this.value)">

Thanks, XmindZ

Xmindz
  • 1,282
  • 13
  • 34
3

You can simply add your JavaScript in body segment like this:

<body>

<script src="myScript.js"> </script>
</body>

myScript will be the file name for your JavaScript. Just write the code and enjoy!

Clomp
  • 3,168
  • 2
  • 23
  • 36
sham133
  • 39
  • 3
  • 4
    Welcome to StackOverflow. Please be more specific and describe how to include the JavaScript file into HTML. – Matt Jul 18 '17 at 13:17
2

I hope this helps someone here: I encountered an issue where I needed to use JavaScript to manipulate some dynamically generated elements. After including the code to my external .js file which I had referenced to between the <script> </script> tags at the head section and it was working perfectly, nothing worked again from the script.Tried using developer tool on FF and it returned null value for the variable holding the new element. I decided to move my script tag to the bottom of the html file just before the </body> tag and bingo every part of the script started to respond fine again.