Nested JavaScript function or maybe While ()
I know there are two questions already posted on this topic, but they don't answer my question (or because I'm just a low coder). My question is that I am trying to learn Java by doing (and failing many times), so I am trying to make a game. I had massive code and it was starting to look terrible, so I thought about myself. (Why not nest some while () statements that would condense the code!) ... it doesn't work, 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 there, I'll set up other functions using nested if, for, or while statements to compact the code. It was much more monstrous before the change, and looking at other examples I can see that this is not how you code the game, but I am trying to learn ... phonetics? ... coding. Can anyone tell me why the nested function starts but the while loop does nothing yet? I tried to change it to an "if" statement nested with "if" and "else if" statements, but still nothing. Hope this was a good question and I'm not just wasting people's time.
-Edit -
I had to change the else if (yes == true || no == true) for the if statement and hook it outside of the while loop for this to work. Now the only problem is that I cannot break away from the loop of the start () function. I tried to move the call to start () inside the function (it was silly, but I figured I'd give it a try) by introducing the call to the following function gender_assignment (); at the end of the previous statement (if (yes == true || no == true)) where I was trying to run the gender function. No matter what I try, I just keep getting "You've already answered this question." How can I go 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 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 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 well above this code. If you want me to publish the entire sheet, I can do that.
-Undo / Answer the last question / New question -
Okay, I can finally see what I am doing wrong and can get so far the code before I have another question. The answer was: I didn't give the game enough information to work.
//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 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 your name?</p>").hide().insertBefore("#placeholder").fadeIn(1000);
check();
}
}
}
gender_addignment();
Now that I understand this, and understanding the connection to the html page is done with document.getElementById("whatyounamedthevariable").innerHTML = whatyounamedthevariable
. These two things in tandem helped me a lot.
Now, the question is, why will some things report Null?
[Example]
endurup = false; endurUp = 0; document.getElementById("endurUp").innerHTML = endurUp;
Using the debugger in FireFox and Crome, you will encounter this message.
cannot set property innerHTML of null.
What does it mean? I have set endurUp to 0! On the side of the html I have it in the code Endurance Up: <span id="endurUp">0</span>
. Is this not enough, or am I somehow not activating the variable?
-Edit / response -
In one of my tags on the html side, I had </spam>
instead </span>
. Lol!
source to share
As @Ankur pointed out, you never call a function start
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, don't declare new functions inside the event (for example, when submitting a form). Declare it at the top of your code
source to share