My Jquery isn't working in my html file

Question

Okay so, I'm not a complete noob but still a beginner at jQuery/javascript and I'm just not getting why this jqueryman.js isn't linking to my html. I am pretty sure i have got the folders tree right, i even placed my js file in the same folder as my html just to make sure it wasn't a mistake there.

head of the index.html

<!-- metas -->
<meta charset='UTF-8'>
<!-- stylesheets -->
    <link rel='stylesheet' href='../css/mainpage.css'>
    <link rel='stylesheet' href='../css/index.css'>
<!-- all the scripts loosly taken online -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script src='http://malsup.github.com/jquery.cycle2.js'></script>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<!-- script files -->
    <script src="jqueryman.js"></script>    <!-- (this is the trouble maker) -->

body of the index.html

<h1 class="h1">neckbeards</h1>


<div class='cycle-slideshow'
    data-cycle-fx='scrollHorz'
    data-cycle-pause-on-hover='false'
    data-cycle-speed='5000'>
    <img class='sliderimg' id="Carl"    alt='Carl'      src='http://i.imgur.com/7kJOy7k.jpg'>
    <img class='sliderimg' id="Tugboat" alt='Tugboat'   src='http://i.imgur.com/mRGbOKv.jpg'>
    <img class='sliderimg' id="P0J0"    alt='P0J0'      src='http://i.imgur.com/UiAIWGf.png'>
    <img class='sliderimg' id="Ffej"    alt='Ffej'      src='http://i.imgur.com/isl6UhR.png'>
</div>
<h1 id="name">Carl</h1>

jqueryman.js

 $(document).ready(
        function () {
            $('.h1').hide()
        });
    );

If you could post the error from your console that would be beneficial. also try added the code to jsfiddle.net and updating your answer with the link. — Ashley Medway
– Ashley Medway, Commented Jan 4, 2014 at 20:12
You are trying to load 2 versions of jquery at the same time: the one from google and the one from jquery. Lose one of them. Just make sure the jquery plugin you're using is called after jquery. Also check jquery is loading properly by loading your page in firefox, > view source click the jquery link. If you see the code you've loaded it correctly. If not check the path. — dewd
– dewd, Commented Jan 4, 2014 at 20:14
jsfiddle.net/MG62E strangly enough this does work.. then I just linked it in a wrong way but it's in the same map.. — Louie Wouters
– Louie Wouters, Commented Jan 4, 2014 at 20:19

Ashley Medway · Accepted Answer · 2014-01-04 20:43:00Z

2

UPDATE: Heres is working example: JSFiddle
You need to remove the . from $('.h1').hide(); The . is referring to a class but you just want to hide the base h1 element.

$(document).ready(function () {
    $('h1').hide();
});

Alternatively to hide just that one element you can do it by its ID.

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

Heres a link to jQuery Selectors tutorial.

Also as noted from comments you also have a syntax error in your JavaScript.

$(document).ready(
    function () {
        $('.h1').hide() // As with both my example above you need to add a semicolon 
    });
); // Additional brace & semicolon that would cause a syntax error.

edited Jan 4, 2014 at 20:43

answered Jan 4, 2014 at 20:06

Ashley Medway

7,3197 gold badges54 silver badges73 bronze badges

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

4 Comments

Louie Wouters Over a year ago

thank you altho i have a class called h1. and it still wont work with or without the .

Ashley Medway Over a year ago

@user2997422 sorry i didn't see that, I have added a comment to your Question

Louie Wouters Over a year ago

jsfiddle.net/MG62E strangly enough this does work.. then I just linked it in a wring way but it's in the same map..

Louie Wouters Over a year ago

but yout jsfiddle isn't working on my pc for some odd reason? xs the jsfiddle i posted worked but not whilst actually putting it in a browser

Qiang · Accepted Answer · 2014-01-04 20:15:57Z

2

Your current jQuery code:

 $(document).ready(
     function () {
          $('.h1').hide()
     });
 );

is not using correct syntax. (You have an extra ); at the end).

Try this:

 $(document).ready(function() {
     $('.h1').hide();
 });

edited Jan 4, 2014 at 20:15

answered Jan 4, 2014 at 20:10

Qiang

65610 silver badges17 bronze badges

Comments

Damien Black · Accepted Answer · 2014-01-04 20:13:28Z

1

Remove the . from h1...

$('h1').hide()

Dots are for classes. So if you have a something like this:

<h1 class='myh1'>

you use $('.myh1') to access it. But if you are talking about a tag, h1, h2, a, img, div, span, you do not use dots.

Interestingly, you can (but shouldn't) even do this in most browsers:

<panda>hello</panda>

and then access it with

$('panda')

Because that isn't a class, but rather a non-standard tag.

edited Jan 4, 2014 at 20:13

answered Jan 4, 2014 at 20:07

Damien Black

5,65720 silver badges25 bronze badges

4 Comments

sdespont Over a year ago

Explain why for the asker

Louie Wouters Over a year ago

thank you altho i have a class called h1. and it still wont work with or without the .

Ashley Medway Over a year ago

@user2997422 could you post on jsfiddle.net and update your question with the link

Louie Wouters Over a year ago

jsfiddle.net/MG62E strangly enough this does work.. then I just linked it in a wring way but it's in the same map..

John S · Accepted Answer · 2014-01-04 20:27:21Z

1

I have tested this locally and it works for me -- even with the two issues mentioned below:

(1) You have a syntax error. Remove the extra ); from the end of the script.

$(document).ready(
    function () {
        $('.h1').hide()
    });
);  // <--- This is not needed.

(2) You are including jQuery twice:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
...
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

edited Jan 4, 2014 at 20:27

answered Jan 4, 2014 at 20:11

John S

21.5k9 gold badges50 silver badges59 bronze badges

2 Comments

Louie Wouters Over a year ago

thanks but sadly it still isn't working I'm afraid xs

John S Over a year ago

@user2997422 - Sorry, I thought this was the issue because I tested it in a jsfiddle, and this syntax error prevented it from working.

mlhuff12 · Accepted Answer · 2014-01-04 20:19:33Z

0

As a rule I would avoid creating a class name the same as a tag name. I think this adds confusion if other coders were to look at the javascript code and not have the html immediately on hand to look at.

answered Jan 4, 2014 at 20:19

mlhuff12

608 bronze badges

1 Comment

Louie Wouters Over a year ago

I try to do this but I was just doing it for testing purposes, I'll take causion next time.

Ashley Medway · Accepted Answer · 2014-01-04 20:47:47Z

0

I found the solution and there is no problem with the class name.

use this it will work because you only forgot the semicolon(;) :

$(document).ready(function () {
    $('.h1').hide();
});

edited Jan 4, 2014 at 20:47

Ashley Medway

7,3197 gold badges54 silver badges73 bronze badges

answered Jan 4, 2014 at 20:26

Nemo

3483 silver badges13 bronze badges

3 Comments

Louie Wouters Over a year ago

Thank you sooo much man, I tried it before but it wasn't working but you sir are amazing, thank you SO much <3

Louie Wouters Over a year ago

sorry ashley, I'm very new to this website and the layout is still confusing to me. please forgive me? :s

Nemo Over a year ago

@JohnS I think the semicolon maters because it shows the end of the statement.

Collectives™ on Stack Overflow

My Jquery isn't working in my html file

6 Answers 6

4 Comments

Comments

4 Comments

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

4 Comments

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related