将Javascript从html移至外部文件

Question

I am having trouble using some javascript that I am trying to convert from inline to an external javascript document. This code, that I'm trying to place externally does not work.

// JavaScript Document
function homepage() {
    $("#button").click(function(){
        $("#main, #nav").slideToggle();
        if($(this).html() == "-"){
            $(this).html("+");
            setTimeout(function() {
                $('#wrapper').css('top', 'auto');
                $('#wrapper').animate({ 'bottom': '0' }, 500);
            }, 500);
        } else {
            $(this).html("-");
            setTimeout(function() {
                $('#wrapper').animate({ 'top': '0' }, 500);
                $('#wrapper').css('bottom', 'auto');
            }, 500);
        }
    });
}

Answer 1

Tries to lock up the script so:

$(document).ready(function(){
  // JavaScript Document
  function homepage() {
  $("#button").click(function(){
  $("#main, #nav").slideToggle();
  if($(this).html() == "-"){
      $(this).html("+");
      setTimeout(function() {
        $('#wrapper').css('top', 'auto');
        $('#wrapper').animate({ 'bottom': '0' }, 500);
      }, 500);
  }
  else{
      $(this).html("-");

      setTimeout(function() {
          $('#wrapper').animate({ 'top': '0' }, 500);
          $('#wrapper').css('bottom', 'auto');
      }, 500);
  }
  });}

});

Answer 2

I assume that it "doesn't work" because your jQuery selectors are failing. Put your code inside as $(function () {...}) to insure it runs on DOM-ready.

Answer 3

Your code makes me assume that you are using jQuery. To move a JS file that uses a library like jQuery to an external file, you have to do the following steps:

If the code is inside jQuery and looks like this:

$(document).ready(function(){
    // here is all your code
});

Then you have to move all of it, including the $(document).ready(); part into the external file and (best) load it at the bottom of your html page.