javascript - 嵌套的 JavaScript 函数，或者可能是 While() 循环

Question

我知道已经发布了两个关于此主题的问题，但它们并没有真正回答我的问题(或者是因为我的编码水平很低)。我的问题是我正在尝试通过实践(并且多次失败)来学习 Java，所以我正在尝试制作游戏。我输入了这么大的代码，它开始看起来很糟糕，所以我心想 oO(为什么不嵌套一些 while() 语句，那会压缩代码!)...它不起作用，我不明白为什么。

    $(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();
                }
            }   
        };

然后我会从这里嵌套其他函数，使用嵌套的“if”、“for”或“while”语句来压缩代码。它在更改之前看起来更可怕，并且查看其他示例，我发现这不是您为游戏编写代码的方式，但我正在尝试学习...语音学？...编码。谁能告诉我为什么嵌套函数启动了，但“while”循环什么都不做？我尝试将其更改为“if”语句，嵌套有“if”和“else if”语句，但仍然没有。 我希望这是一个很好的问题，我不是在浪费人们的时间。

-编辑-

我必须将 else if(yes == true || no == true) 更改为 if 语句，并将其插入 while 循环之外，才能正常工作。现在唯一的问题是，我无法脱离 start() 函数循环。我尝试将 start() 调用移动到函数内部(这很愚蠢，但我想我会尝试)，调用下一个函数 gender_assignment();在上一条语句 (if(yes == true || no == true)) 的末尾，我试图启动性别函数。无论我尝试什么，我都会不断收到“你已经回答了这个问题”。如何中断到下一个函数？

这是我现在拥有的:

$(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();

啊，对于此处未显示的所有值，我已将它们初始化远高于此代码。如果您想让我发布整张表格，我可以做到。

-编辑/回答上一个问题/出现新问题-

好吧，我终于明白了我做错了什么，并且在我有另一个问题之前能够在代码中得到这么多。答案是，我没有为游戏提供足够的信息来使用。

    //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();

现在我明白了，将数据插入html页面的理解是由document.getElementById("whatyounamedthevariable").innerHTML = whatyounamedthevariable完成的。 .这两件事对我帮助很大。

现在，问题是……为什么某些东西会返回 Null？

[示例] endurup = false; endurUp = 0; document.getElementById("endurUp").innerHTML = endurUp; 使用 FireFox 和 Crome 中的调试器都会显示此消息。 cannot set property innerHTML of null.这意味着什么？我将 endurUp 设置为 0! 在 html 方面，我在代码中有这个，Endurance Up: <span id="endurUp">0</span> .这还不够，还是我没有以某种方式激活变量？

-编辑/回答-

在 html 端的一个标签中，我有 </spam>而不是 </span> .哈哈!

Answer 1

正如@Ankur 所指出的，您永远不会调用start 函数

你可以这样做:

  $(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();
      });
  });

此外，不要在事件中声明新函数(例如在提交表单时)。 在代码顶部声明它