Why won't Javascript code work after moving it from html to an external js file?

Question

I have this Javascript code that was working perfectly fine in my HTML. When I moved it to my main.js it suddenly stopped working.

Disclaimer: I am very new to jQuery and Javascript, so sorry if it is really obvious.

var infoVisible = false,
buyVisible = false;

function closeAllProductInfo() {
    $('#info').css({visibility: 'hidden'});
    $('#buy').css({visibility: 'hidden'});
    $('#options.info a').removeClass('active');
    $('#options.buy a').removeClass('active');
    infoVisible = false;
    buyVisible = false;
    imagesVisible = false;
}

function openProductInfo() {
    closeAllProductInfo();
    $('#info').css({visibility: 'visible', opacity: 0});
    $('#info').animate({opacity: 1}, 250);
    $('#options.info a').addClass('active');
    infoVisible = true;
}

function openProductBuy() {
    closeAllProductInfo();
    $('#buy').css({visibility: 'visible', opacity: 0});
    $('#buy').animate({opacity: 1}, 250);
    $('#options.buy a').addClass('active');
    buyVisible = true;
}

$('.info').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity: 0}, 250, function() {  
            closeAllProductInfo(); 
        }); 
    } else { 
        openProductInfo(); 
    }

    return false;
});

$('.buy').click(function() {
    if (!$(this).hasClass('in-active')) {
        if (buyVisible) { 
            $('#buy').animate({opacity: 0}, 250, function() { 
                closeAllProductInfo(); 
            }); 
        } 
        else { 
            openProductBuy(); 
        }
    }

    return false;
});

$('#info').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity:0}, 250, function() { 
            closeAllProductInfo(); 
        }); 
    }
});

$('#buy').click(function() {
    if (!$(this).hasClass('in-active')) {
        if (buyVisible) { 
            $('#buy').animate({opacity:0}, 250, function() { 
                closeAllProductInfo(); 
            }); 
        }
    }
});

What's your html code for integrating this file, and jquery? — Yoann
– Yoann, Commented Feb 10, 2013 at 19:44
Even if it does not have anything to do with your actual code, please format it properly. It's hard to read. Also show us how you are including the file. — Felix Kling
– Felix Kling, Commented Feb 10, 2013 at 19:45
In what way did it stop working? How are you including your code in the html? — Ted Hopp
– Ted Hopp, Commented Feb 10, 2013 at 19:45
Sorry guys, just figured out its because I was including main.js at the top of the html file. Moved it to the bottom and it works. — novicePrgrmr
– novicePrgrmr, Commented Feb 10, 2013 at 19:45
@novicePrgrmr: Good. You cannot access DOM elements if they don't exist yet. — Felix Kling
– Felix Kling, Commented Feb 10, 2013 at 19:46

Ian Mercer · Accepted Answer · 2013-02-10 19:45:39Z

1

Probably because it used to execute after the document was loaded but now it executes when the script is loaded. Do you load main.js at the end of your HTML file or the start? Use this to get it to execute after the document is ready:

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

answered Feb 10, 2013 at 19:45

Ian Mercer

39.4k8 gold badges103 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

novicePrgrmr Over a year ago

That exactly what it was. Thanks!

Ian Mercer Over a year ago

No problem, just mark it as the answer to help the next person who has this same question.

Yoann · Accepted Answer · 2013-02-10 19:46:03Z

0

Try to wrap all your code in :

$(document).ready(function(){
   // Your code in here.
});

answered Feb 10, 2013 at 19:46

Yoann

3,0801 gold badge28 silver badges36 bronze badges

Collectives™ on Stack Overflow

Why won't Javascript code work after moving it from html to an external js file?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related