JavaScript not working on any browser on my machine

Question

This issue has been driving me crazy! I am relatively new to web design. I started to learn coding on codecademy.com. Everything worked perfectly! html, css and JavaScript went smooth. However, this is not the case when I start coding with Sublime Text or DreamWeaver on my machine. Whenever I try to run my website, the scripts that I linked doesn't work. I copy-pasted the codes from a Codecadamy tutorial(html, css, JavaScript) into a completely new file in DreamWeaver(index.html, stylesheet.css and script.css), I did this to make sure my code isn't faulty. When I ran the code in the built-in Codecadamy browser, it works perfectly. But whenever I save the files with DreamWeaver or sublime text, the website seems to "ignore" the external .js file.. I tested the website on 4 different browsers(Chrome, IE, Firefox, Opera) but found no luck!

I have no idea what might be causing this problem..

I tried to copy my code into the built-in Codecadamy but it still didn't work

Heres my simple javascript code(just to test out whether its working on my machine):

$(document).ready(function() {
    $('#openDialog').click(function() {
        $('.container').css('display', 'none');
    });
});

Here is my website, I hosted it in a public folder on my DropBox account; https://dl.dropboxusercontent.com/u/33331786/xbox/index.html

Show the bit of HTML where you are including this JavaScript in. If it is in an external file you may simply be linking wrong. — Vincent Ramdhanie, Dec 01 '13 at 20:44
@MohammadAdil #openDialog is a button to toggle visibility of .container(a
which holds some elements(img's, p's)) — borislemke, Dec 01 '13 at 20:45
@borislemke .. then have you tried `$('.container')` , see an extra `.` — Adil Shaikh, Dec 01 '13 at 20:45
@MohammadAdil sry for the typo, in my .js file it is actually '.container' instead of 'container' — borislemke, Dec 01 '13 at 20:47
Also, is the global.js file in the same location as the html file? Try putting a simple alert("hello"); in the JavaScript and see if it runs. — Vincent Ramdhanie, Dec 01 '13 at 20:48
@MohammadAdil yes, it is in the same location as the .html file. I took a look at koenp's answers. I have to add that I am running the html file locally with Chrome, so this may be the problem why my machine wont run the javascript due to security concerns — borislemke, Dec 01 '13 at 20:51

score 3 · Accepted Answer · answered Dec 01 '13 at 21:12

3

Look at your browser's JavaScript console:

Uncaught ReferenceError: $ is not defined                           global.js:2

This is your source code:

<script type='text/javascript' src='global.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

You are trying to use jQuery before you load it!

answered Dec 01 '13 at 21:12

Quentin

914,110
126
1,211
1,335

1

Correct. Also, your script tag needs to begin with `//ajax.....` or `https://ajax.....`, not `http://ajax.....`, so that the script is loaded over HTTPS instead of HTTP when your site (i.e. Dropbox) is being accessed over HTTPS. Otherwise it will be blocked. – Shai Dec 01 '13 at 21:14
THANK YOU VERY MUCH! I didn't realize that the order was so important, so foolish of me.. Well, I was just a graphic designer before, will make sure to pay more attention to these details.. – borislemke Dec 01 '13 at 21:21

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

Are you using a local running server or are you using the file:// 'protocol' in your URL's? If you're not running a server then that 's the problem. Because of security constraints browsers do not run local JS files except when you explicitly enable the browser to do so.

See here for more info on how to do that: How to launch html using Chrome at "--allow-file-access-from-files" mode?

edited May 23 '17 at 11:53

Community

1
1

answered Dec 01 '13 at 20:44

Koen Peters

12,798
6
36
59

I opened the .html file with Google Chrome(and any other browsers I have), so yes, I am using the fil://'protocol'. I will review the link you've given and come back to you in a moment.. Thanks – borislemke Dec 01 '13 at 20:49
I tried the solution but it didn't make any changes. Here I hosted my files into my DropBox account.. The site is up and running, but the .jc is still not working.. https://dl.dropboxusercontent.com/u/33331786/xbox/index.html – borislemke Dec 01 '13 at 21:04

score 1 · Answer 3 · answered Dec 01 '13 at 20:48

1

Do you ever reference the jQuery library? You could do it like this

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

answered Dec 01 '13 at 20:48

Ferbla

51
1
11

I tried, it didn't help. But still thanks! Heres a link to my website I hosted on my dropbox account; https://dl.dropboxusercontent.com/u/33331786/xbox/index.html – borislemke Dec 01 '13 at 21:07
Thanks for your answer, I placed this command after linking my external .js file that confuses the browser because it is called before $ is defined.. – borislemke Dec 01 '13 at 21:23

JavaScript not working on any browser on my machine

3 Answers3