Javascript works in HTML but not javascript file

Question

my javascript code works withing a my html file but when I move it to a javascript file of its own, it doesn't work. I checked and it is not an issue with the file location. And it doesn't work in any browser. Please help. Thank you.

My HTML calling the file:

<script type="text/javascript" src="js/click-dropdown.js"></script>

Here is my javascript code:

$(document).ready(function() {
$('.prospectus-click').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        //$('.prospectus-form > div').parent().removeClass('on');
        $('.prospectus-arrow').removeClass('prospectus-arrow-up');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.table-wrap').slideUp('fast');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($('.prospectus-click').next().is(':hidden') == true) {
                    //ADD THE IMGON CLASS TO THE IMAGE
            //$(this).find('.accimge').addClass('imgon');  
            //ADD THE ON CLASS TO THE BUTTON
            $('.prospectus-arrow').addClass('prospectus-arrow-up');
            //OPEN THE SLIDE
            $('.prospectus-click').next().slideDown('medium');
         } 

     });



    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    $('.prospectus-click').mouseover(function() {
        $(this).parent().addClass('over');

    }).mouseout(function() {
        $(this).parent().removeClass('over');                                       
    });

    $('.table-wrap').hide();


$('.live-consult').click(function() {       
        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.live-consult-div').slideUp('fast');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($('.live-consult').next().is(':hidden') == true) {
            $('.live-consult').next().slideDown('medium');
         } 

     });



    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    $('.live-consult').mouseover(function() {
        $(this).parent().addClass('over');

    }).mouseout(function() {
        $(this).parent().removeClass('over');                                       
    });

    $('.live-consult-div').hide();
});

Check your browser console for javascript errors and give us more details on the nature of the errors... — Christophe Roussy, Feb 28 '14 at 15:11
Make sure you're referencing the script file after the jQuery script. — Nevett, Feb 28 '14 at 15:12
Are you actually loading jQuery anywhere? As @Nevett said, you have to load jQuery before loading this script. — elixenide, Feb 28 '14 at 15:12
Check your network tab. Is this file definitely beeing loaded? — iappwebdev, Feb 28 '14 at 15:14
I have checked my browser console. there are no errors. sorry what do you mean by "referencing the script file after the jQuery script." I have referenced it in the head of the file. — user3365353, Feb 28 '14 at 15:15
Ok I had my script panel enabled so I was not able to see the error. ReferenceError: $ is not defined $(document).ready(function() { — user3365353, Feb 28 '14 at 15:17
Your script is using jQuery so you have to load it before you call your other file. — GuyT, Feb 28 '14 at 15:17
Open the chome dev tools. Push cntrl + O, then type the name of your file. If it doesn't appear then it is not loaded. — BentOnCoding, Feb 28 '14 at 15:17
Ok it works with loading jquery first. Why does it work in html without loading query first? — user3365353, Feb 28 '14 at 15:23
@user3365353 Because your browser loads the javascript files on first and after reads your scripts in the html file. — R3tep, Feb 28 '14 at 15:28

score 0 · Answer 1 · answered Feb 28 '14 at 15:25

0

The Javascript file you have written is using the jQuery library. In order for this to work you must load the jQuery library prior to your script.

You can download jQuery from here http://jquery.com/

I would also suggest for performance that you use the minified file and make your scripts load at the bottom of your html page before the closing body tag.

<script type="text/javascript" src="js/jquery-min-1.11.0.js"></script>
<script type="text/javascript" src="js/click-dropdown.js"></script>

answered Feb 28 '14 at 15:25

David Hirst

1,890
2
22
31

Hi, could you tell me why loading the script at the end of the body would help performance. Thanks. – user3365353 Feb 28 '14 at 15:30
Hi, no problem. Basically when your browser loads a page it will load items from top to bottom, so when it encounters your Javascript in the top it will read and load these files first before it reaches any of the html to render in your page body. Since you want to load your page first then worry about javascript second, it makes more sense to load these after the html markup at the bottom. For more info check this answer http://stackoverflow.com/questions/14547062/javascript-placed-at-the-end-of-the-document-so-the-pages-load-faster-true – David Hirst Feb 28 '14 at 15:33

score 0 · Answer 2 · answered Feb 28 '14 at 15:49

As Nevett and David mentioned suspected that you might be including/loading your 'click-dropdown.js' file prior to inclusion of jquery library. But if you are not sure in which order you have the included your script, then simple way to detect is either check you dev console for error "ReferenceError: $ is not defined" or just simply write

alert('my $ is '+typeof $);

as the very first line of your script. If alert says undefined then include your script after jquery. If alert says function then please describe what is the exact problem you are facing; any error, warnings.

Javascript works in HTML but not javascript file

2 Answers2