我的功能无法运行
[英]My function won't run
问题描述
我的函数ProfessorOpen以为它不会再次启动。 我使用了警报来查看问题是否出在onclick上，但是警报起作用了，因此呼叫一定是有问题的。 我知道图像不会显示，但这没关系。 谢谢您的帮助！
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>
2 个解决方案
解决方案1
1 已采纳 2016-02-18 03:07:22
问题在于回调：
function(){gender = "boy"; speechNum++; professorOpen(); return;}
^ no need to increment
professorOpen Open已经增加了SpeechNum，因此在调用之前不需要增加。
我将它们取出来，游戏运行正常，之后我又添加了另一条文字，以便您可以看到它的工作原理。
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>
解决方案2
0 2016-02-18 02:46:43
功能professorOpen功能时才宣布preProfessorOpen执行。 您是否总是在实际的professorOpen pre之前进行pre ？
编辑：为了具有“一次运行”的功能，您可以轻松地使用条件语句。
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
}
一般来说，在其他函数内部声明函数（例如您的情况）是非常不好的做法。 您将需要立即声明所有函数，以免发生这种情况-并且可以使用类似于上述的语句来控制它们的执行。
我的功能无法运行？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.