jquery script not working inside HTML

Question

( Answered: dont use <script type="text/javascript" src="jquery-1.8.0.min.js"></script> in html)

I am learning Jquery from this tutorial :

http://www.littlewebhut.com/javascript/getting_started/

I created One Html , 1 js file . put them on same physical folder ,put "jquery-1.8.0.min.js" in same folder , put a link of js file in html page But it is not working .

my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
 <h1>Heading one</h1>
 <p>This is just some text for heading 1</p>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>

</body>

</html>

My Jquery Page (my_code.js) :

$(document).ready(function(){

    $("p").hide();

    $("h1").click(function(){
        $(this).next().slideToggle(300);
    });

});

there is some minor mistake that is happening , I tried to search , but could not found relevant link .PLease suggest if I am missing something

What error are you getting ? See the console/dev tools (f12) and notice you have to click the header text to trigger the effect, isn't the toogle effect working ?. — Allende
– Allende, Commented Feb 16, 2014 at 7:40
The code you have works great (check it out in action here: jsfiddle.net/pmUDy ). It's just not obvious why you're having the problem. Like Allende suggests, open up your browser's dev tools to see if there's an error printed to the console... hit F12, click on console, look for errors... developers.google.com/chrome-developer-tools — Anthony Chu
– Anthony Chu, Commented Feb 16, 2014 at 7:44

Boshi · Accepted Answer · 2014-02-16 07:47:56Z

2

Your code is working fine.There must be some problem with your jquery file path. Try including CDN hosted jquery library as follows or check your path:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

answered Feb 16, 2014 at 7:47

Boshi

2301 silver badge4 bronze badges

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

2 Comments

Neeraj Verma Over a year ago

yes . "<script type="text/javascript" src="jquery-1.8.0.min.js"></script> " was the main culprit ....replaced that with cdn script did the Magic .. thanks

Boshi Over a year ago

Glad to be of help :)

Saransh Sharma · Accepted Answer · 2014-02-16 07:50:21Z

0

I have tried this on js fiddle and it's working fine I guess this is what you want ,right when on clicking the h1 tag you need that p to hide if I am not wrong ,

This is the js fiddle http://jsfiddle.net/Saranshshrma/7rzLW/1/

If this script is, small you can always put in, this

<script></script>

Tags before body content but remember put your Jquery before anything else any script or code you want to execute and you can post the chrome inspect element errors while executing this code

answered Feb 16, 2014 at 7:50

Saransh Sharma

3085 silver badges19 bronze badges

2 Comments

Neeraj Verma Over a year ago

i tried to install firebug an see the error ... the error is "ReferenceError: $ is not defined $(document).ready(function(){"

Saransh Sharma Over a year ago

This is working fine why don't you use the direct script

Allende · Accepted Answer · 2014-02-16 07:54:55Z

0

What error are you getting ? See the console/dev tools (f12) and notice you have to click the header text to trigger the effect:

http://jsfiddle.net/m5LL4/

 $(document).ready(function(){

    $("p").hide();

    $("h1").click(function(){
      $(this).next().slideToggle(300);
    });

});

I did paste your code, just take a part of the html with the same jquery version and it works.

edited Feb 16, 2014 at 7:54

answered Feb 16, 2014 at 7:41

Allende

1,4822 gold badges23 silver badges40 bronze badges

Comments

shubhraj · Accepted Answer · 2014-02-16 08:04:12Z

0

Is javascript enabled in your browser? If you are using chrome Go Ctrl+H click on Setting in left side->show advanced Setting->Privacy->Content Settings->Allow all sites to run Javascript. If already checked check for your jquery path file name.

answered Feb 16, 2014 at 8:04

shubhraj

3873 silver badges12 bronze badges

1 Comment

Neeraj Verma Over a year ago

the error is "ReferenceError: $ is not defined $(document).ready(function(){"

Collectives™ on Stack Overflow

jquery script not working inside HTML

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related