External JS file not working in HTML page

Question

I'm playing with Bootstrap, but it seems that I cannot make my external js script work.

I loaded at the end of my HTML file the following scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/myscript.js"></script>

Jquery gets loaded first, and then I call my script which is positioned in the js folder, which is placed in the root directory.

jQuery(function(){
    "use strict";
    $("#services h2").text("Hello World");
)};

If I try this simple code in the HTML page it works, but not in the external file. I tried to read other answers but I couldn't figure where the problem resides. Do I need to set up a LAMP environment to make this work?

Can you make anything happen using myscript.js? Is it just that particular code or does the page act like it can't find the file? — BSMP
– BSMP, Commented Jun 26, 2015 at 19:09
Yes I tried to run that script inside the external file but it doesn't work. It seems like the file is not being loaded, but the src parameter should be right reading answers to other questions — The Condor
– The Condor, Commented Jun 26, 2015 at 19:16
What does the javascript console say? Are you sure it's supposed to have a leading slash? maybe it should just be "js/myscript.js" — Quintile
– Quintile, Commented Jun 26, 2015 at 19:19

SeaBiscuit · Accepted Answer · 2015-06-26 19:29:18Z

1

In external js file place your function inside doc ready function : You can start fixing your problem from there.

$("document").ready(function() {
    jQuery(function(){
        $("#services h2").text("Hello World");
   });
});

also make sure your /js/myscript.js path is correct. For confirming your JQuery is loaded correctly right-click on loaded page in mozzila > Inspect with Firebug > choose console > then choose JQuerify option which will confirm your jQuery has loaded succesfuly. (Obviously if firebug is not installed, install it!)

edited Jun 26, 2015 at 19:29

answered Jun 26, 2015 at 19:22

SeaBiscuit

2,6214 gold badges27 silver badges44 bronze badges

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

1 Comment

Yogi Over a year ago

Not sure I follow. Isn't jQuery(function()... just shorthand for $("document").ready(function() ... ? Why wrap one in the other?

Ishank · Accepted Answer · 2017-05-10 14:59:54Z

0

Take off the / before js/myscript.js If you write it this way it would work:

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

edited May 10, 2017 at 14:59

Ishank

2,92634 silver badges43 bronze badges

answered May 10, 2017 at 14:11

Sarah Besbaci

114 bronze badges

Collectives™ on Stack Overflow

External JS file not working in HTML page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related