How do I get my nested if statement to work in jQuery

Question

Right now there is an input text box where users type in a word. Once they type in that word and press enter, the word disappears and a new one appears and so on. If they type it wrong the color turns red. I can only get it to work once however because something is wrong with my nested if statements.

$(".inputText").keyup(function (event) {
    if (event.keyCode == 13) {
        var text = $('.inputText').val();
        if (text == ("example")) {
            $('.example').fadeOut('fast');
            $('.example2').fadeIn('slow');
            $('.inputText').val('');
            if (event.keyCode == 13) {
                var text = $('.inputText').val();
                if (text == ("example2")) {
                    $('.example2').fadeOut('fast');
                    $('.example3').fadeIn('slow');
                    $('.inputText').val('');
                }
            }
        } else {
            $('.example').css('color', 'red');
        }
    }
});

Answer 1

I think that your overarching problem is the structure of your logic. Basically, in your code, you are trying to load user input (by getting $('.inputText').val()) twice without letting the user actually enter anything. What you need to do is store some state outside of your event listener and then update the state each time the user presses enter. Please see http://jsfiddle.net/qT96T/ for a working example of what I think you're trying to achieve.