Javascript skipping to last function, ignoring others

Question

So I agreed to help a friend out with a little project of his. Making a simple game where people choose a tag line and then it loads another. I have the layout done, and some functionality, but it's all pretty broken.

The issue started when I tried adding a third stage. Pretty sure I am hitting some kind of memory leak because everything started going haywire right away. My current iteration is trying to separate the functions, but admittedly, with only a basic js class under my belt I think I just don't know enough to make this work.

I have a js fiddle here. You can see on load it jumps right to the 3rd stage and even that doesn't work correctly. I believe its coded to make the correct answer "Rock and Roll" flash green, but it still flashes red.

function resetFrame1 (){

    $('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
    callback();

}

function resetFrame2 (){

    $('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
    callback();
}

function end(){
    //right now undefined since I can't get this to work at all.



}





function stageOne(){

    var score = 0;

    $('#leftText').text("Green Living. . . . . Easy!!!")

    $('#leftImage').html("<img src=>");

    $('#rightText').text("Burn Your Tires!");

    $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            score++;
            $('#leftSide').css( "background-color", "green");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame1();
            });
        }   
        else if (e.which==76 || e.which==108){
            $('#rightSide').css( "background-color", "red");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame1();
            });
        }   
    });

}   

function stageTwo(){


        $('#leftText').text("Keep your lights on. It prevents home invasion.")

        $('#leftImage').html("<img src=>");

        $('#rightText').text("The earth needs YOU!");

        $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            $('#leftSide').css( "background-color", "red");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame2();
            });
        }   
        else if (e.which==76 || e.which==108){

            score++;
            $('#rightSide').css( "background-color", "green");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame2();
            });
        }   
    }); 
}   


function stageThree(){


        $('#leftText').text("Organic Farms are Terrorists")

        $('#leftImage').html("<img src=>");

        $('#rightText').text("Environmental Activism is the new Rock&Roll.");

        $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            $('#leftSide').css( "background-color", "red");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    end();
            });
        }   
        else if (e.which==76 || e.which==108){

            score++;
            $('#rightSide').css( "background-color", "green");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    end();
            });
        }   
    }); 
}   




$(document).ready(function(){

    stageOne(); 

    stageTwo();

    stageThree();1

});

JSFIDDLE

I went ahead and added the js file I am using in order to allow the link to jsfiddle.

Thanks all for any help. And remember, as I have with trying to help my friend, "no good deed goes unpunished".

score 5 · Answer 1 · answered Apr 20 '15 at 01:25

5

You're calling the functions one after the other inside of your document ready function. If you want them to show progressively, call stageOne(), and then have some logic to either advance to stage two (by calling the stageTwo function) or some navigation to go back and forth between the levels. Because stageThree is getting called last, that's why it is getting executed and rendered.

answered Apr 20 '15 at 01:25

captray

3,618
1
18
15

Thanks mate. Prior to this I only called stageOne. Then as you can see inside stage one either choice calls resetframe1 which used to call stageT – Adam Apr 20 '15 at 01:28
Sorry. StageTwo. Which called resetframe2 which called.... the problem is that broke everything as well. I've been trying to read on "closings" which sounds like it might be my issue but it's still a little above me – Adam Apr 20 '15 at 01:30
I would check out this post http://stackoverflow.com/questions/111102/how-do-javascript-closures-work as it has a lot of good information and links related to closures. – captray Apr 20 '15 at 01:38
Thanks. That's actually the post that started me on the closures track. Like I said, still not sure it's the larger problem, but it seemed like a direction to head in. – Adam Apr 20 '15 at 01:42

Javascript skipping to last function, ignoring others

1 Answers1