Putting scripts on page

What is the best way to include JavaScript on pages? the head, body, external file, or (just heard this recently) the bottom of the body? … cause I’ve noticed sometimes when I put the scripts in different spots, that spot will work for one but not another… (Or maybe that’s my imagination)

These days, most people recommend that you 1) put your scripts in an external file and 2) link to those scripts at the bottom of your page (just before the closing </body> tag).

Alright then, and I got a problem here, I know my code is working (because I tested it in jsfiddle) but I can’t get it to show up working on my site and this is the code

$(".control li").click(function () {
      $(".control li ul").slideToggle();
});&#8203;

but no matter what I do (putting it in the head, body or at the bottom of the body… it’s all the same…) and yes when I put it in the body I put the <script type=“text/javascript”><script> around the code… so what could I be doing wrong? (I feel as if it’s right under my nose though :confused: ) oh and just to let you know, I’m a developer noob (just been learning for maybe a year now…so bear with me…)

The only thing i see wrong is your not scoping the context correctly for your click event, currently you just targeting every <ul> that is a child of .control which won’t work. See the below code which eliminates this issue.

$(".control li").click(function () {
    $("ul", this).slideToggle();
});

Apart from what chris.upjohn said … and sorry if this is a dumb question … but you do have a link to the jQuery library too, right?

Yep I have that as well, and chris.upjohn I put in the code you specified, but that didn’t work either…

EDIT: When I looked at the script via developer tools console (Chrome) it said “Uncaught SyntaxError: Unexpected token ILLEGAL” right below the code… now I have no idea what that means, but I think that might be part of the problem…

Could you please copy the line from your web inspector that is telling you has an error.

Well I fixed the previous error by apparently deleting a question mark that I put at the end , but now there’s a new error…


$(".control li").click(function () {
Uncaught TypeError: Cannot call method 'click' of null
      $("ul", this).slideToggle();
});

That error suggests your attempting to call an element before the DOM is ready, see the below code.

$(function() {
    $(".control li").click(function () {
        $("ul", this).slideToggle();
    });
});

If that’s the case, the other solution is to put the scripts at the bottom of the page, before the closing </body> tag.

Still nothing… I don’t understand why it wouldn’t be working…

Methinks it’s time for links. :slight_smile:

What do you mean?

If we could see the page, we’d actually be able to test it and see why it’s not working. Otherwise, we are stabbing in the dark.

Ooh… that’ll be a problem then, I’m working on localhost (site is under construction)

Could you put up a test page anywhere, such as on your own site? Otherwise perhaps a jsFiddle page.

Strange… When I put the content on jsfiddle… it started working O_o

Grrr… The original error popped up once again, this time, i’ll post the code too


<script type="text/javascript">
$(function() {
$(".control li").click(function () {
    $("ul", this).slideToggle();
});&#8203;
Uncaught SyntaxError: Unexpected token ILLEGAL
});
</script>

I finally figured it out! I was looking at the jQuery documentation on the the jQuery site, and come find out if I’m using another Javascript library, I gotta include the jQuery.noConflict() function (just realized I was using another library when they mentioned Prototype, and I remembered seeing that in my <head>) and really I only using jQuery so i didn’t know about Prototype. Now it’s all fixed, thanks chris.upjohn and ralph.m for helping me out, since I’m just a beginner.

You should definitely remove one of the libraries if you can.