External javascript not working

Question

I have placed one javascript (hide.js) in my html Page ... Hide function is not working .
My scripts are in right order
My code is as per tutorial

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery Example </title>
</head>
<body>
    <p id="paragraph ">
        This is Paragraph</p>
    <script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
    <script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
</body>
</html>

hide.js

$('#paragraph').click(function () {
    $('#paragraph').hide();
});

I have test it with Firebug lite on Chrome .. Console doesnt show any error .. in script is also showing external scripts ...Other script are working fine
I have rearranged script Order like this

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>

still it is not working .. i couldnt find any relevant link ..whats wrong ..Please Suggest

your hide.js would not be able to understand any of the selectors if you dont have a reference to the jquery library first, the answers below showld do the trick for you. — Sid
– Sid, Commented Apr 10, 2014 at 6:47
OK got it ....Problem is in "" extra space ..as suggested by rooby ... thanks — user3487944
– user3487944, Commented Apr 10, 2014 at 6:55

Hein Zaw Htet · Accepted Answer · 2014-04-10 07:03:16Z

2

Because, you included hide.js before jquery.js. You should include hide.js after jquery.js like so...

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>

In case you must include hide.js first before jquery.js. Change your code to

$( document ).ready(function() {
 $('#paragraph').click(function () {
    $('#paragraph').hide();
 });
}

In this way, your script will work after whole page is loaded.

Or, similarly you can use.

$(function() {
  // Your Code
});

edited Apr 10, 2014 at 7:03

answered Apr 10, 2014 at 6:46

Hein Zaw Htet

1,0011 gold badge10 silver badges16 bronze badges

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

2 Comments

rooby Over a year ago

Damn, you beat me to it.

Hein Zaw Htet Over a year ago

Yes. you don't need it if you include hide.js after jquery.js. In my answer, i just give you a choice.

A.T. · Accepted Answer · 2014-04-10 06:44:38Z

1

order should be, include jquery main file all above.

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>

core jQuery file must be include before any other plugin as they may use core jquery methods internally.

answered Apr 10, 2014 at 6:44

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

1 Comment

rooby Over a year ago

Although he says he has no errors in the console, which he would have in this case.

rooby · Accepted Answer · 2014-04-10 06:56:45Z

0

You have a space in the id of your paragraph tag, which is invalid, so your javascript cannot select that paragraph using that id.

You need to remove the space from your id attribute.

answered Apr 10, 2014 at 6:56

rooby

83115 silver badges24 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-04-10 06:44:29Z

0

Order of script - hide.js is using jQuery so it has to be included after jquery.js

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>

Your browser console should show you an error saying something like Uncaught ReferenceError: $ is not defined

answered Apr 10, 2014 at 6:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

user3487944 Over a year ago

console is blank .. why it is blank ?

Arun P Johny Over a year ago

@user3487944 are you share the js files are downloaded... look at your network tab to see whether the js files are giving 200 OK status

Dinum Dissanayaka · Accepted Answer · 2014-04-10 07:00:32Z

0

your id has space.remove it and try again This is Paragraph

it should be like this This is Paragraph

answered Apr 10, 2014 at 7:00

Dinum Dissanayaka

3862 silver badges9 bronze badges

Comments

Gaurav Joshi · Accepted Answer · 2015-08-06 00:19:14Z

0

I have discovered a very strange thing which probably could be the cause. It should certainly help you.

In your code, I see you have only external JS files. After those external files, include an empty tag. It should work.

Cause is not known but external JS does not get included at times if you do not have inline or empty script tag. It will be very interesting to dig in more. Let me update once I figure out.

Environment: Chrome latest Version 44.0.2403.130 m

answered Aug 6, 2015 at 0:19

Gaurav Joshi

196 bronze badges

Collectives™ on Stack Overflow

External javascript not working

6 Answers 6

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related