Javascript variables are disappearing

The page I'm working with is here:

http://harrisonfjord.com/survey/index.html

When you click on an object in each step, the "alt" tag of the image map region on which you clicked is being saved as a variable answer(current question number).

The code is here (ignore the comments, I've just put them in so I know what the hell I'm doing!):

$(window).load(function(){

        //#shape functions
        $('#shape area').hover(
            function(e){
                $('#'+ this.alt).addClass('hover');
            },
            function(e){
                $('#'+ this.alt).removeClass('hover');
            } //.hover allows 2 function - first is mouse on, second is mouse off
        ); //End #shape .hover function

        $('#shape area').click( //.click only allows 1 function.
            function(e){
                $('img.selected-region').removeClass('selected-region');
                $('#'+ this.alt).addClass('selected-region');
                var answer1 = $(this).attr("alt");
                alert(answer1);

            }
        );//End #Shape .click function



        //#height functions

        $('#height area').hover(
            function(e){
                $('#'+ this.alt).addClass('hover');
            },
            function(e){
                $('#'+ this.alt).removeClass('hover');
            }
        ); //End #height .hover function

        $('#height area').click(
            function(e){
                $('img.selected-region').removeClass('selected-region');
                $('#'+ this.alt).addClass('selected-region');
                var answer2 = $(this).attr("alt");
                alert(answer2 + answer1);

            }
        );//End #height .click function



        //#world functions
        $('#world area').hover(
            function(e){
                $('#'+ this.alt).addClass('hover');
            },
            function(e){
                $('#'+ this.alt).removeClass('hover');
            } 
        ); //End #world .hover function

        $('#world area').click(
            function(e){
                $('img.selected-region').removeClass('selected-region');
                $('#'+ this.alt).addClass('selected-region');
                var answer3 = $(this).attr("alt");
                alert(answer3);

            }
        );//End #world .click function           

    }); //End (window) onLoad function 

As you can see, I'm creating an alert for each variable just so I can see that it's working when I click. However, after I press "next", the variable seems to erase itself. As you can see, in the second step, I'm alerting (answer1 + answer2), yet nothing comes up. Further, if you check the html code for "step 4", you'll see that instead of images I'm running a simple document.write script:

<h3>
    <script type="text/javascript">
        document.write(answer1);
    </script>
</h3>   

yet, again, nothing displays. Why are my variables not persisting through the whole jquery survey?

Excuse the massive code below, but it might help resolve the issue - the entire .js code that runs the jquery survey steps, as well as the hover/click functions of each map.

(function($){

$(window).load(function(){

        //#shape functions
        $('#shape area').hover(
            function(e){
                $('#'+ this.alt).addClass('hover');
            },
            function(e){
                $('#'+ this.alt).removeClass('hover');
            } //.hover allows 2 function - first is mouse on, second is mouse off
        ); //End #shape .hover function

        $('#shape area').click( //.click only allows 1 function.
            function(e){
                $('img.selected-region').removeClass('selected-region');
                $('#'+ this.alt).addClass('selected-region');
                var answer1 = $(this).attr("alt");
                alert(answer1);

            }
        );//End #Shape .click function



        //#height functions

        $('#height area').hover(
            function(e){
                $('#'+ this.alt).addClass('hover');
            },
            function(e){
                $('#'+ this.alt).removeClass('hover');
            }
        ); //End #height .hover function

        $('#height area').click(
            function(e){
                $('img.selected-region').removeClass('selected-region');
                $('#'+ this.alt).addClass('selected-region');
                var answer2 = $(this).attr("alt");
                alert(answer2 + answer1);

            }
        );//End #height .click function



        //#world functions
        $('#world area').hover(
            function(e){
                $('#'+ this.alt).addClass('hover');
            },
            function(e){
                $('#'+ this.alt).removeClass('hover');
            } 
        ); //End #world .hover function

        $('#world area').click(
            function(e){
                $('img.selected-region').removeClass('selected-region');
                $('#'+ this.alt).addClass('selected-region');
                var answer3 = $(this).attr("alt");
                alert(answer3);

            }
        );//End #world .click function              

                // jQuery.extend merges contents of two or 
                // more objects together into the first object
                //$.extend(useranswers,{ 
                    //answer1 : $("img.selected-region").attr('rel') 
                //});

                //$.cookie('survery', 
                    //JSON.stringify(useranswers),
                    //{ expires: 7, path: '/', domain: '<your_domain_name>' }
                //);


    }); //End (window) onLoad function  

$.fn.smartWizard = function(options) {
        var defaults = {
              selectedStep: 0,  // Selected Step, 0 = first step
              errorSteps:[],    // Array Steps with errors
              enableAll:false,  // Enable All Steps, true/false
              animation:true,   // Animation Effect on navigation, true/false         
              validatorFunc:function(){return true;} // Step validation function, Step index will be passed
        };
        var options = $.extend(defaults, options);  

        return this.each(function() {
                obj = $(this); 
                var wizcurrent = 0;
                  var steps = $("ul > li > a", obj);
                  // Apply Default Style to Steps
                  applyCSS($(steps, obj),"wiz-anc-default");
                  // Hide All Steps on load
                hideAllSteps();

                $(steps, obj).bind("click", function(e){
                    e.preventDefault();
                    var isDone = $(this, obj).attr("isDone");
                    if(isDone == 1){
                        var selIdx = steps.index(this);  
                        applyCSS($(wizcurrent, obj),"wiz-anc-done"); 
                        selectStep(selIdx);
                    }
                });
                // activates steps up to the selected step
                for(i=0;i<steps.length;i++){
                  if(i<=options.selectedStep || options.enableAll==true){
                    activateStep(i);
                  }
                }
                // highlight steps with errors
                $.each(options.errorSteps, function(i, n){
                  //applyCSS(steps.eq(n),"wiz-anc-error");
                  setErrorStep(n)
                });

                  selectStep(options.selectedStep);
                //Next Navigation
                $(".next", obj).bind("click", function(e){
                  e.preventDefault();  
                  var curStepIdx = $(steps, obj).index(wizcurrent);
                  if(options.validatorFunc(curStepIdx)){
                      var nextStepIdx = curStepIdx+1;
                      applyCSS($(wizcurrent, obj),"wiz-anc-done"); 
                      selectStep(nextStepIdx);
                  }
                });

                //Back Navigation
                $(".back", obj).bind("click", function(e){
                  e.preventDefault(); 
                  applyCSS($(wizcurrent, obj),"wiz-anc-done"); 
                  var prevIdx = $(steps, obj).index(wizcurrent)-1;
                  selectStep(prevIdx);
                });

                function selectStep(idx){
                    if(idx < steps.length && idx >= 0){
                      var selStepAnchor = $(steps, obj).eq(idx);
                      var selStepIdx =selStepAnchor.attr("href");
                      hideAllSteps();          
                      selStepAnchor.attr("isDone","1");

                      if(options.animation==true){
                        $(selStepIdx, obj).fadeIn("fast");
                      }else{
                        $(selStepIdx, obj).show();
                      }
                      applyCSS($(selStepAnchor, obj),"wiz-anc-current");
                      wizcurrent = selStepAnchor;
                    }
                }

                function activateStep(idx){
                    var selStepAnchor = steps.eq(idx);
                    selStepAnchor.attr("isDone","1");
                    applyCSS($(selStepAnchor, obj),"wiz-anc-done");
                }

                function setErrorStep(idx){
                    var selStepAnchor = steps.eq(idx);
                    selStepAnchor.attr("isError","1"); 
                    $(selStepAnchor, obj).addClass("wiz-anc-error"); 
                }

                function unsetErrorStep(idx){
                    var selStepAnchor = steps.eq(idx);
                    selStepAnchor.attr("isError",""); 
                    $(selStepAnchor, obj).removeClass("wiz-anc-error"); 
                } 

                function hideAllSteps(){
                    $(steps, obj).each(function(){
                        $($(this, obj).attr("href"), obj).hide();
                  });
                }

                function applyCSS(elm,css){
                    $(elm, obj).removeClass("w开发者_C百科iz-anc-default");
                    $(elm, obj).removeClass("wiz-anc-current");
                    $(elm, obj).removeClass("wiz-anc-done");
                    $(elm, obj).addClass(css); 
                }
        });  
    };  
})(jQuery);

Since you are defining the variables "var answer1" within a function, they're only defined in the scope of this function. Try this:

$(window).load(function(){

    var answer1, answer2, answer3;

    //#shape functions
    $('#shape area').hover(
    ...

Then loose the "var" within your click event functions.

Initialize the answer1 and answer 2 variables outside any function at the beginning of the script. This way the functions will use global variables instead of local.

Basically, if you create a new variable inside a function it will be only available inside that specific function (local). If it has been created before, outside a function, it uses that variable (global). Google on "JavaScript local and global variables" for more info regarding this topic.

var answer1, answer;

In short, put that at the beginning of your script and change further references to:

answer = .... // hence, no var before the variable name

Hope that helps!