我的功能无法运行

Question

My function professorOpen will not start up again thought it is called. 我的函数ProfessorOpen以为它不会再次启动。 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. 我使用了警报来查看问题是否出在onclick上，但是警报起作用了，因此呼叫一定是有问题的。 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&eacute;mon, clod!"; speechBox.onclick = function(){professorOpen();} function professorOpen() { speechNum++; switch(speechNum) { case 1: speech = "I am Yellow Diamond &ndash; reduced to introducing Pok&eacute;mon Spin-Offs."; break; case 2: speech = "This world of clods is widely inhabited by creatures known as Pok&eacute;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&eacute;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. professorOpen Open已经增加了SpeechNum，因此在调用之前不需要增加。

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&eacute;mon, clod!"; speechBox.onclick = function() { professorOpen(); } function professorOpen() { speechNum++; switch (speechNum) { case 1: speech = "I am Yellow Diamond &ndash; reduced to introducing Pok&eacute;mon Spin-Offs."; break; case 2: speech = "This world of clods is widely inhabited by creatures known as Pok&eacute;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&eacute;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. 功能professorOpen功能时才宣布preProfessorOpen执行。 Are you always running pre before the actual professorOpen ? 您是否总是在实际的professorOpen pre之前进行pre ？

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. 您将需要立即声明所有函数，以免发生这种情况-并且可以使用类似于上述的语句来控制它们的执行。

我的功能无法运行

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-18 03:07:22

解决方案2
0 2016-02-18 02:46:43

我的功能无法运行

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-18 03:07:22

解决方案2 0 2016-02-18 02:46:43

解决方案1
1 已采纳 2016-02-18 03:07:22

解决方案2
0 2016-02-18 02:46:43