Cannot get jQuery to work (working offline)

Question

I am new to this site and to jQuery and I have a problem that is probably very simple but I cannot for the life of me solve it. I am running "index.html" from my computer and jquery.js (downloaded from jquery's website) is absolutely in the same folder and it seems to be referenced correctly in my code.

It was only meant to be a simple thing of clicking on a div and it would fade out. I really don't understand why it doesn't work.

Sorry if this is a really basic question, I have looked around the site and searched a lot.

index.html

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="/jquery.js" type="text/javascript"></script>
    <script src="/script.js" type="text/javascript"></script>
</head>
<body>

    <div class="red"></div>
    <div class="blue"></div>
    <div class="blue"></div>
    <div class="blue"></div>

</body>
</html>

style.css

div {
    height: 300px;
    width: 300px;
    border: 2px solid black;
    border-radius: 100%;
    display: inline-block;

}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

script.js

$(document).ready(function() {
    $('div').click(function() {
        $('div').fadeOut('slow');
    });
});

http://jsfiddle.net/ou43epos/

What do you mean by "it doesn't work"? Does it not do anything? Or does it fade out every div instead of the one that's clicked? (Because that's what the code does.) If you look in the browser's JavaScript console do you see any errors there? If you look in the console's network tab do you see all files loaded correctly? — JJJ, Apr 09 '15 at 13:23
Check `browser's console` for error, and top of it, verify `resources` in browser, if jQuery is present or not. — Mox Shah, Apr 09 '15 at 13:25

Blago · Accepted Answer · 2015-04-09T13:27:37.710

1

Try changing

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

to

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

The leading slash makes your browser look in the file system root. Without the slash, it'll load from the current (index.html) directory.

edited Apr 09 '15 at 13:27

answered Apr 09 '15 at 13:24

Blago

4,697
2
34
29

5

It would be great if you also explained why this might help. – JJJ Apr 09 '15 at 13:24

score 1 · Answer 2 · answered Apr 09 '15 at 13:29

I just solved it! It was simple.. I put "/" before script and jquery. I didn't realise I could use the network tab to see what files were loaded.

Such a basic error but it drove me crazy for a long time! Such is life :).

Thanks all (especially @Juhana)

score 0 · Answer 3 · edited May 23 '17 at 10:29

Using src="/jquery.js" to load your scripts results in your browser trying to load file:///C:/jquery.js. Change it to src="jquery.js".

As Mark Byers said in this answer:

If your browser is currently pointing at http://foo/bar/baz.html then:

• <a href="reset/index.html"> would link to http://foo/bar/reset/index.html.

• <a href="/reset/index.html"> would link to http://foo/reset/index.html.

Cannot get jQuery to work (working offline)

3 Answers3