How to use external ".js" files

Question

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?

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 <script type='text/javascript' language='javascript' src='Path to your external js file'/>. — Lion
– Lion, Commented Jul 16, 2012 at 4:31
you should load the external js file before calling function. — Shreedhar
– Shreedhar, Commented Jul 16, 2012 at 4:32
document.getElementById('users').addEventListener('change', showUser, false); in a separate JavaScript file would be better than onchange. — uınbɐɥs
– uınbɐɥs, Commented Jul 16, 2012 at 6:00
Note: Point to the external script file exactly where you would have written the script. w3schools.com - HTML <script> src Attribute — Guy Coder
– Guy Coder, Commented Jun 25, 2017 at 14:24
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
– mrkd1991, Commented Sep 17, 2017 at 0:36

Jalpesh Patel · Accepted Answer · 2012-07-16 04:33:46Z

58

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

answered Jul 16, 2012 at 4:33

Jalpesh Patel

3,17810 gold badges47 silver badges68 bronze badges

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

6 Comments

blsn Over a year ago

Thank you all for replying to me. Thank you Jalpesh Patel for your quick and effectively solution.

nora Over a year ago

Probably changed now, but i put the <script src="aiosdh.js"></script> at the bottom of the body. Anywhere else and it didn't seem to work ?

Jalpesh Patel Over a year ago

@nora Can you please put your code on SO? I think there is some mistake in code.

nora Over a year ago

@Jalpesh pastebin.com/dcjiRPDL I stuck it in a paste bin, as it probs wouldn't work well in this comment.

Jalpesh Patel Over a year ago

@nora is your issue is fixed??

|

Sachindra N. Pandey · Accepted Answer · 2015-12-03 07:28:34Z

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"; 
            }

answered Dec 3, 2015 at 7:28

Sachindra N. Pandey

1,26218 silver badges16 bronze badges

Comments

walrii · Accepted Answer · 2012-07-16 04:30:26Z

6

In your head element add

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

answered Jul 16, 2012 at 4:30

walrii

3,5322 gold badges33 silver badges47 bronze badges

1 Comment

Julian Over a year ago

.. 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. en.wikipedia.org/wiki/Unobtrusive_JavaScript

Xmindz · Accepted Answer · 2012-07-16 04:35:27Z

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

answered Jul 16, 2012 at 4:35

Xmindz

1,28013 silver badges35 bronze badges

1 Comment

Adi Over a year ago

The issue about <a> tags has been discussed extensively here and here. Even though it works, it's not recommended to put Javascript in href.

Clomp · Accepted Answer · 2018-03-03 18:57:31Z

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!

edited Mar 3, 2018 at 18:57

Clomp

3,3282 gold badges25 silver badges39 bronze badges

answered Jul 18, 2017 at 13:02

sham133

393 bronze badges

1 Comment

Matt Over a year ago

Welcome to StackOverflow. Please be more specific and describe how to include the JavaScript file into HTML.

score 2 · Accepted Answer · 2017-12-16 09:42:40Z

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.

edited Dec 16, 2017 at 9:42

answered Dec 8, 2017 at 23:47

user7417428

Collectives™ on Stack Overflow

How to use external ".js" files

6 Answers 6

6 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related