CODEWITHSUNDEEP
javascriptjquery
user1778543
user1778543

Reputation: 167

Using jquery in js file

Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:

<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4"             type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>

And the whole content of the js file is

$("h1").css("color", "red");

But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.

EDIT:

Thanks for the help everybody, I was able to make it work :)

Upvotes: 0

Views: 489

Answers (6)

hiimricky
hiimricky

Reputation: 5

If you want to use jquery in .js file all you need to do is type: src=" ..." above code.

Upvotes: 0

Emre Bolat
Emre Bolat

Reputation: 4562

Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.

$(document).ready(function() {
  $("h1").css("color", "red");
});
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
  <h1>test</h1>
</body>
</html>

Upvotes: 3

Andrew
Andrew

Reputation: 56

There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files. 

<head> 
</head>
<body>
<header>
  <h1>test</h1>
</header>
</body>

Example: JSFiddle

Upvotes: 1

socialpiranha
socialpiranha

Reputation: 172

  1. Move your <h1> tag to be in the <body>
  2. Move your <script> tags to the <head>
  3. Replace your code in your JS file with what imvain2 said, so that the JS will load once your document is ready.

  4. Make sure you are correctly referencing your jQuery script. You can even use this to test it out: 

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

Upvotes: 2

PRDeving
PRDeving

Reputation: 669

not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?

EDIT:

try importing this instead...

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

Upvotes: 4

imvain2
imvain2

Reputation: 15867

did you try this?

$(document).ready(function(){
    $("h1").css("color", "red");
});

Upvotes: 5

Related Questions