我的函数教授Open会再次启动，因为它被调用了。我使用警报来查看问题是否在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 Endbody {
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>
答案 0 :(得分：1)
问题在于回调：
function(){gender = "boy"; speechNum++; professorOpen(); return;}
^ no need to increment
professorOpen已经增加了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 Endbody {
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>
答案 1 :(得分：0)
仅在执行函数professorOpen时声明函数preProfessorOpen。您是否始终在实际pre之前运行professorOpen？
编辑：为了拥有“运行一次”类型的功能，您可以轻松使用条件。
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
}
一般来说，在其他函数中声明函数（比如你的情况）是非常糟糕的做法。你需要立即声明你的所有函数，这样就不会发生这种情况 - 你可以用类似于上面的语句来控制它们的执行。