Nested JavaScript function, or maybe While() loops

Question

I am aware that there are two questions already posted about this topic, but they don't really answer my question (or it's because I'm just that low of a coder). My question is I am trying to learn java by doing (and failing numerous times), so I am trying to make a game. I had this massive code typed out, and it was beginning to look atrocious, so I thought to myself oO(Why not nest some while() statements, that would condense the code!)... it isn't working, and I don't understand why.

    $(document).ready(function() {

        $("#console").fadeIn(3000); //A console to keep everything good

        $("form").submit(function() { //User input
            var input = $("#command_line").val(); //A nifty box to put your answers in
            var check = false;
            function check() { //If you don't follow directions this happens
                check = true;
            };
        //startup
        function start() { //This function is nested, and runs
            var yes = false; //defining yes
            var no = false; //defining no
            while (yes == false && no == false && currentarea == "startup") { //<-- This while loop does nothing?
                if (input == "yes") {
                    yes = true; //changing yes to true
                    $("<p>Great! What is your gender? Type <u><b>m</b></u> for Male or <u><b>f</b></u> for Female.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                    check();
                }
                else if (input == "no") {
                    no = true; //changing no to true
                    $("<p>Sorry to see you go. Press F5 to restart, or exit your browser.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                    check();
                }
                else if (yes == true || no == true) {   
                    $("<p>You've already answered this question.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                    check();
                }
            }   
        };

Then from here I would nest other functions, using nested 'if', 'for', or 'while' statements to condense the code. It looked more monstrous before the change, and looking at other examples, I see this isn't how you code for a game, but I am trying to learn the... phonetics?... of coding. Can anyone tell me why the nested function starts, but the 'while' loop does nothing? I tried changing it to an 'if' statement, nested with 'if' and 'else if' statements, but still nothing. I hope this was a good question, and I am not just wasting people's time.

-Edit-

I had to change the else if(yes == true || no == true) to an if statement, and plug it in outside the while loop, for that to work. Only problem now is, I can't break away from the start() function loop. I tried moving the start() call inside the function (this was stupid, but I figured I'd try), putting in a call to the next function gender_assignment(); at the end of the previous statement (if(yes == true || no == true)) where I was attempting to get the gender function to start. No matter what I try, I just keep getting "You've already answered this question." How do I break to the next function?

This is what I have now:

$(document).ready(function() {

$("#console").fadeIn(3000); //A console to keep everything looking good

$("form").submit(function() { //User input
    var input = $("#command_line").val(); //A nifty box to put your answers in
    var check = false;
        function check() { //If you don't follow directions this happens
            check = true;
        };

    //startup
    function start() { //This function is nested, and runs
        while (yes == false && no == false) { //<-- This while loop does nothing?
            if (input == "yes") {
                yes = true;
                $("<p>Great! What is your gender? Type <u><b>m</b></u> for Male or <u><b>f</b></u> for Female.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                check();
            }
            else if (input == "no") {
                no = true;
                $("<p>Sorry to see you go. Press F5 to restart, or exit your browser.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                check();
            }
        }
        if (yes == true || no == true) { //print text, then move to next function <-- Why no move to next function
            $("<p>You've answered that already.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            check();
        }
    };
    start();
    //gender
    function gender_assignment() {
        while (male == false && female == false) {
            if (input == "m") {
                male = true;
                gender = "male";
                document.getElementById("gender").innerHTML = gender;
                $("<p>Nice to meet cha, bro. What's your name?</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                check();
            }
            else if (input == "f") {
                female = true;
                gender = "female";
                document.getElementById("gender").innerHTML = gender;
                $("<p>Sup, Girl? What's your name?</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                check();
            }
        }
        if (male == true || female == true) { //print text, then move to next function
            $("<p>Identity issues? You are already a " + gender + ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            check();
        }
    };
    gender_assignment();

Ah, and for all values not shown here, I have initialized them far above this code. If you want me to post the whole sheet, I can do that.

-Edit/Answer to last question/New question arrises-

Okay, I finally see what I was doing wrong, and am able to get so far in the code before I have another question. The answer was, I wasn't giving the game enough information to work with.

    //I had these variables already, but never posted them.
    var yes = false;
    var no = false;
    currentarea = "Start";
    //I added some do->if structures that I didn't have before.
    function start() {
        while(yes != true && no != true && currentarea == "Start") {
            if (input == "yes") {
                yes = true;
                $("<p>Great! What is your gender? Type <u><b>m</b></u> for Male or <u><b>f</b></u> for Female.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                currentarea = "Gender Assignment";  //<--This is what I had to put to get to next function. Easy enough... now that I know. Lol.
                check();
            }
            else if (input == "no") {
                no = true;
                $("<p>Sorry to see you go. Press F5 to restart, or exit your browser.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                check();
            }
        }  //<--I also noticed that the if->true statement was stupid, especially when I was telling it where to proceed to.
    }
    start();

    function gender_assignment() {
        while (male != true && female != true && currentarea == "Gender Assignment") {
            if (input == "m") {
                male = true;
                gender = "Male";
                HP = m_hp;
                document.getElementById("HP").innerHTML = HP;
                MP = m_mp;
                document.getElementById("MP").innerHTML = MP;
                Attack = m_attack;
                document.getElementById("Attack").innerHTML = Attack;
                Endur = m_endur;
                document.getElementById("Endur").innerHTML = Endur;
                Blk = m_blk;
                document.getElementById("Blk").innerHTML = Blk;
                currentarea = "Name";
                document.getElementById("gender").innerHTML = gender;
                $("<p>Nice to meet cha, bro. What's your name?</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                check();
            }
            else if (input == "f") {
                female = true;
                gender = "Female";
                HP = f_hp;
                document.getElementById("HP").innerHTML = HP;
                MP = f_mp;
                document.getElementById("MP").innerHTML = MP;
                Attack = f_attack;
                document.getElementById("Attack").innerHTML = Attack;
                Endur = f_endur;
                document.getElementById("Endur").innerHTML = Endur;
                Blk = f_blk;
                document.getElementById("Blk").innerHTML = Blk;
                currentarea = "Name";
                document.getElementById("gender").innerHTML = gender;
                $("<p>Sup, Girl? What's your name?</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                check();
            }
        }
    }
    gender_addignment();

Now that I understand that, and the understanding of plugging in data to the html page is done by thedocument.getElementById("whatyounamedthevariable").innerHTML = whatyounamedthevariable. Those two things in tandem helped me out a lot.

Now, the question is... why certain things will report back Null?

[Example] endurup = false; endurUp = 0; document.getElementById("endurUp").innerHTML = endurUp; Using the debugger in FireFox and Crome both reveal this message. cannot set property innerHTML of null. What does that mean? I set endurUp to 0! On the html side I have this in the code, Endurance Up: <span id="endurUp">0</span>. Is this not enough, or am I not activating the variable in some way?

-Edit/Answer-

In one of my tags on the html side I had </spam> instead of </span>. Lol!

Answer 1

As @Ankur pointed out you never call the start function

You can do it like this:

  $(document).ready(function() {
      $("#console").fadeIn(3000); //A console to keep everything good

      $("form").submit(function() { //User input
          var input = $("#command_line").val(); //A nifty box to put your answers in
          var check = false;

          function check() { //If you don't follow directions this happens
              check = true;
          };
          //startup
          function start() { //This function is nested, and runs
              var yes = false; //defining yes
              var no = false; //defining no
              while (yes == false && no == false && currentarea == "startup") { //<-- This while loop does nothing?
                  if (input == "yes") {
                      yes = true; //changing yes to true
                      $("<p>Great! What is your gender? Type <u><b>m</b></u> for Male or <u><b>f</b></u> for Female.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                      check();
                  } else if (input == "no") {
                      no = true; //changing no to true
                      $("<p>Sorry to see you go. Press F5 to restart, or exit your browser.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                      check();
                  } else if (yes == true || no == true) {
                      $("<p>You've already answered this question.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                      check();
                  }
              }
          };
          start();
      });
  });

Also.Do not declare new functions inside an event(such as on form submit). Declare it at the top of your code