My function won't run

Question

My function professorOpen will not start up again thought it is called. I used an alert to see if the problem was in the onclick, but the alert worked, so it must be a problem with the call. I know the images won't show, but that doesn't matter. Thanks for the help!

var gameContainer = document.getElementById("game-container");

var gender;

var speechBox = document.createElement("DIV");
	speechBox.id = "speech-box";
	var speechP = document.createElement("P");
		speechP.id = "speech-p"
		var speech = document.createTextNode("");
	var speechNum = 0;
	var text = true;

function preProfessorOpen() {
	var startButton = document.getElementById("start-button");
	gameContainer.removeChild(startButton);
	document.body.style.backgroundImage = "url(index/src/img/professor.png)";
	gameContainer.appendChild(speechBox);
		speechBox.appendChild(speechP);
		speechP.innerHTML = "Welcome to the world of Pokémon, clod!";
	speechBox.onclick = function(){professorOpen();}
		function professorOpen() {
			speechNum++;
			switch(speechNum) {
				case 1:
					speech = "I am Yellow Diamond – reduced to introducing Pokémon Spin-Offs.";
					break;
				case 2:
					speech = "This world of clods is widely inhabited by creatures known as Pokémon.";
					break;
				case 3:
					speech = "These mysterious creature can be found in every corner of this world...";
					break;
				case 4:
					speech = "Some run across the plains, others fly through the skies, and others yet swim deep in the oceans...";
					break;
				case 5:
					speech = "Clods live together with these Pokémon, lending their little strength to one another to live and prosper.";
					break;
				case 6:
					speech = "Let's get started with some quick questions...<br>Are you a boy? Or are you a girl?<br>(Probably a boy if Alex shared this with you.)";
					break;
				case 7:
					speechBox.onclick = ""
					speechBox.innerHTML = '<p id="male">Boy</p> \
									       <p id="female">Girl</p>'
										document.getElementById("male").onclick = function(){gender = "boy"; speechNum++; professorOpen(); return;}
										document.getElementById("female").onclick = function(){gender = "girl"; speechNum++; professorOpen(); return;}
					break;
				case 8:
					speechBox.innerHTML = "";
					speechBox.appendChild(speechP);
					speech = "So, you're a " + gender + "? \
							<br> \
							<span id='yes-p'>Yep!</span> \
							<span id='no-p'>No, obviously.</span>";
								document.getElementById("yes-p").onclick = function(){professorOpen(); return;}
								document.getElementById("no-p").onclick = function(){speechNum = 6; professorOpen(); return;}
			}
				if(text){speechP.innerHTML = speech;}
				text = true;
		}											//professOpen Func End
}													//preProfessOpen Func End

body {
	background-color:black;
	background-repeat:no-repeat; background-size:300px 700px; background-position:center top;
}
#game-container{
	width:800px; height:700px;
	border:1px solid white;
	margin:0 auto;
	overflow:hidden;
	padding:0;
}

#start-button{
	width:100px; height:40px;
	position:relative; top:330px; left:350px;
	background-color:red;
	border:1px solid white; border-bottom-width:2px; border-top-width:0px;
	font-size:125%;
	cursor:pointer;
}
#start-button:hover{
	color:white;
}
#logo{
	width:100%; height:300px;
	position:relative;
	z-index:3;
}
#sub-logo{
	text-shadow: 1px 0 5px white, -1px 0 5px white, 0 1px 5px white, 0 -1px 5px white;
	color:#FEFF00;
	text-align:center;
	font-size:50px;
	position:relative; bottom:70px; left:15px;
	z-index:2;
}
#sub-logo-img{
	width:550px; height:405px;
	margin:auto;
	position:relative; left:140px; bottom:170px;
	z-index:1;
}

#speech-box{
	width:60%; height:100px;
	background-color:white;
	color:black;
	font-size:125%;
	border:1px solid #999999; border-radius:20px;
	margin:0 auto;
	padding:0 10px;
	opacity:.8;
	position:relative; bottom:10px; top:600px;
	cursor:pointer;
		-webkit-touch-callout:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
}
.main-menu-box-pic{
	width:20px; height:20px;
	float:right;
	position:relative; bottom:3px;
}
#male{color:#0000FF; margin-bottom:0;}
#female{color:#FF0066; margin-top:10px;}

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Game</title>
	<meta name="robots" content="noindex, nofollow">
	<meta name="author" content="Some Nerd.">
	<link rel="icon" href="index/src/img/favicon.ico">
	<link rel="stylesheet" href="index/src/style.css">
</head>

<body>
	<div id="game-container">
		<button id="start-button" onclick="preProfessorOpen()">Start</button>
	</div>
	<script src="index/src/src.js"></script>
</body>
</html>

Answer 1

The problem is with the callback:

function(){gender = "boy"; speechNum++; professorOpen(); return;}
                           ^ no need to increment

professorOpen already increments speechNum, so don't need to increment before calling.

I've taken them out and the game works fine, I've added another line of speech after so you can see it works.

var gameContainer = document.getElementById("game-container");

var gender;

var speechBox = document.createElement("DIV");
speechBox.id = "speech-box";
var speechP = document.createElement("P");
speechP.id = "speech-p"
var speech = document.createTextNode("");
var speechNum = 0;
var text = true;

function preProfessorOpen() {
    var startButton = document.getElementById("start-button");
    gameContainer.removeChild(startButton);
    document.body.style.backgroundImage = "url(index/src/img/professor.png)";
    gameContainer.appendChild(speechBox);
    speechBox.appendChild(speechP);
    speechP.innerHTML = "Welcome to the world of Pokémon, clod!";
    speechBox.onclick = function() {
      professorOpen();
    }

    function professorOpen() {

        speechNum++;
        switch (speechNum) {
          case 1:
            speech = "I am Yellow Diamond – reduced to introducing Pokémon Spin-Offs.";
            break;
          case 2:
            speech = "This world of clods is widely inhabited by creatures known as Pokémon.";
            break;
          case 3:
            speech = "These mysterious creature can be found in every corner of this world...";
            break;
          case 4:
            speech = "Some run across the plains, others fly through the skies, and others yet swim deep in the oceans...";
            break;
          case 5:
            speech = "Clods live together with these Pokémon, lending their little strength to one another to live and prosper.";
            break;
          case 6:
            speech = "Let's get started with some quick questions...<br>Are you a boy? Or are you a girl?<br>(Probably a boy if Alex shared this with you.)";
            break;
          case 7:
            speechBox.onclick = ""
            speechBox.innerHTML = '<p id="male">Boy</p> \
									       <p id="female">Girl</p>'
            document.getElementById("male").onclick = function() {
              gender = "boy";
              professorOpen();
              return;
            }
            document.getElementById("female").onclick = function() {
              gender = "girl";
              professorOpen();
              return;
            }
            break;
          case 8:
            speechBox.innerHTML = "So, you're a " + gender + "? \
							<br> \
							<span id='yes-p'>Yep!</span> \
							<span id='no-p'>No, obviously.</span>";
            document.getElementById("yes-p").onclick = function() {
              professorOpen();
              return;
            };
            document.getElementById("no-p").onclick = function() {
              speechNum = 6;
              professorOpen();
              return;
            };
            break;

          case 9:
            speechBox.innerHTML = "Next Line of Speech";
            break;
        }
        if (text) {
          speechP.innerHTML = speech;
        }
        text = true;
      } //professOpen Func End
  } //preProfessOpen Func End

body {
  background-color: black;
  background-repeat: no-repeat;
  background-size: 300px 700px;
  background-position: center top;
}
#game-container {
  width: 800px;
  height: 700px;
  border: 1px solid white;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
}
#start-button {
  width: 100px;
  height: 40px;
  position: relative;
  top: 330px;
  left: 350px;
  background-color: red;
  border: 1px solid white;
  border-bottom-width: 2px;
  border-top-width: 0px;
  font-size: 125%;
  cursor: pointer;
}
#start-button:hover {
  color: white;
}
#logo {
  width: 100%;
  height: 300px;
  position: relative;
  z-index: 3;
}
#sub-logo {
  text-shadow: 1px 0 5px white, -1px 0 5px white, 0 1px 5px white, 0 -1px 5px white;
  color: #FEFF00;
  text-align: center;
  font-size: 50px;
  position: relative;
  bottom: 70px;
  left: 15px;
  z-index: 2;
}
#sub-logo-img {
  width: 550px;
  height: 405px;
  margin: auto;
  position: relative;
  left: 140px;
  bottom: 170px;
  z-index: 1;
}
#speech-box {
  width: 60%;
  height: 100px;
  background-color: white;
  color: black;
  font-size: 125%;
  border: 1px solid #999999;
  border-radius: 20px;
  margin: 0 auto;
  padding: 0 10px;
  opacity: .8;
  position: relative;
  bottom: 10px;
  top: 600px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.main-menu-box-pic {
  width: 20px;
  height: 20px;
  float: right;
  position: relative;
  bottom: 3px;
}
#male {
  color: #0000FF;
  margin-bottom: 0;
}
#female {
  color: #FF0066;
  margin-top: 10px;
}

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <title>Game</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="author" content="Some Nerd.">
  <link rel="icon" href="index/src/img/favicon.ico">
  <link rel="stylesheet" href="index/src/style.css">
</head>

<body>
  <div id="game-container">
    <button id="start-button" onclick="preProfessorOpen()">Start</button>
  </div>
  <script src="index/src/src.js"></script>
</body>

</html>

Answer 2

Function professorOpen is only declared when the function preProfessorOpen is executed. Are you always running pre before the actual professorOpen?

Edit: In order to have a "run once" sort of function, you could easily use a conditional.

var preRan = false;

function preProfessorOpen(){
  if( preRan ) return;

  // Scary code that should only be executed once here...

  preRan = true;
}

function professorOpen() {
  // We only want to run this fn if pre already ran
  if( !preRan ) return;

  // Your code for professorOpen here
}

Generally speaking, declaring functions inside other functions (like in your case) is pretty bad practice. You'll want to declare all your functions right away, so that this kind of thing does not happen -- and you can control their execution with statements akin to the above.