只有开关语句有时可以工作

Question

开关首先不工作，但点击几下后，情况7就会出现。我使用了一个警报来确保speechNum ++能够正常工作，而且确实如此。我还使用了===的if语句来确保speechNum仍然是一个数字，并且它也这样做了。这是在我添加了保存和作弊功能之后开始的（尽管我看不到）。只有Javascript可能会有问题。我有一个理论，我错了一个}，但如果是这样，我找不到它。我知道图像没有出现，但没关系。提前致谢！

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

 
var gender; 
 
var name = ""; 
 

 
var speechBox = document.createElement("DIV"); 
 
\t speechBox.id = "speech-box"; 
 
\t var speechP = document.createElement("P"); 
 
\t \t speechP.id = "speech-p" 
 
\t \t var speech = document.createTextNode(""); 
 
\t var speechNum = 0; 
 
\t var text = true; 
 
function mainMenu() { 
 
    \t gameContainer.removeChild(document.getElementById("start-button")); \t \t \t \t \t \t //button disappears 
 
    document.body.removeChild(document.getElementById('warning'));       //warning disappears 
 
\t var mainMenuBox = document.createElement("DIV"); 
 
\t \t mainMenuBox.id = "main-menu-box"; 
 
\t var mainMenuBoxNew = document.createElement("P"); 
 
\t \t mainMenuBoxNew.className = "main-menu-box-p"; 
 
\t \t mainMenuBoxNew.innerHTML = "New Game"; 
 
\t \t \t var mainMenuBoxNewPic = document.createElement("IMG"); 
 
\t \t \t \t mainMenuBoxNewPic.className = "main-menu-box-pic"; 
 
\t \t \t \t mainMenuBoxNewPic.src = "index/src/img/menu/red.gif" 
 
\t \t \t \t mainMenuBoxNew.appendChild(mainMenuBoxNewPic); 
 
\t \t mainMenuBoxNew.onmouseenter = function(){mainMenuBoxNewPic.src = "index/src/img/menu/redAnimated.gif";} 
 
\t \t mainMenuBoxNew.onmouseleave = function(){mainMenuBoxNewPic.src = "index/src/img/menu/red.gif";} 
 
\t \t mainMenuBoxNew.onclick = function(){gameContainer.removeChild(mainMenuBox); 
 
      preProfessorOpen(); 
 
      return; 
 
     } 
 
\t var mainMenuBoxSave = document.createElement("P"); 
 
\t \t mainMenuBoxSave.className = "main-menu-box-p"; 
 
\t \t mainMenuBoxSave.innerHTML = "Save Code"; 
 
\t \t \t var mainMenuBoxSavePic = document.createElement("IMG"); 
 
\t \t \t \t mainMenuBoxSavePic.className = "main-menu-box-pic"; 
 
\t \t \t \t mainMenuBoxSavePic.src = "index/src/img/menu/binary.jpg"; 
 
\t \t \t \t mainMenuBoxSave.appendChild(mainMenuBoxSavePic); 
 
\t \t mainMenuBoxSave.onmouseenter = function(){mainMenuBoxSavePic.src = "index/src/img/menu/binaryAnimated.gif";} 
 
\t \t mainMenuBoxSave.onmouseleave = function(){mainMenuBoxSavePic.src = "index/src/img/menu/binary.jpg";} 
 
     mainMenuBoxSave.onclick = function(){gameContainer.removeChild(mainMenuBox); 
 
      inputSaveCode(); 
 
      return; 
 
     } 
 
\t var mainMenuBoxCheat = document.createElement("P"); 
 
\t \t mainMenuBoxCheat.className = "main-menu-box-p"; 
 
\t \t mainMenuBoxCheat.innerHTML = "Cheat Code"; 
 
\t \t \t var mainMenuBoxCheatPic = document.createElement("IMG"); 
 
\t \t \t \t mainMenuBoxCheatPic.className = "main-menu-box-pic"; 
 
\t \t \t \t mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCode.jpg"; 
 
\t \t \t \t mainMenuBoxCheat.appendChild(mainMenuBoxCheatPic); 
 
\t \t mainMenuBoxCheat.onmouseenter = function(){mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCodeAnimated.gif";} 
 
\t \t mainMenuBoxCheat.onmouseleave = function(){mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCode.jpg";} 
 
     mainMenuBoxCheat.onclick = function(){gameContainer.removeChild(mainMenuBox); 
 
      inputCheatCode(); 
 
      return; 
 
     } 
 
\t gameContainer.appendChild(mainMenuBox); 
 
\t mainMenuBox.appendChild(mainMenuBoxNew); 
 
\t mainMenuBox.appendChild(mainMenuBoxSave); 
 
\t mainMenuBox.appendChild(mainMenuBoxCheat); 
 
} 
 

 
function preProfessorOpen() { 
 
\t document.body.style.backgroundImage = "url(index/src/img/yellowDiamond/professor.png)"; 
 
\t gameContainer.appendChild(speechBox); 
 
\t \t speechBox.appendChild(speechP); 
 
\t \t speechP.innerHTML = "Welcome to the world of Pokémon, clod!"; 
 
\t speechBox.onclick = function(){professorOpen();} 
 
\t \t function professorOpen() { 
 
\t \t \t speechNum++; 
 
\t \t \t switch(speechNum) { 
 
\t \t \t \t case 1: 
 
\t \t \t \t \t speech = "I am Yellow Diamond – reduced to introducing Pokémon Spin-Offs."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 2: 
 
\t \t \t \t \t speech = "This world of clods is widely inhabited by creatures known as Pokémon."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 3: 
 
\t \t \t \t \t speech = "These mysterious creature can be found in every corner of this world..."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 4: 
 
\t \t \t \t \t speech = "Some run across the plains, others fly through the skies, and others yet swim deep in the oceans..."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 5: 
 
\t \t \t \t \t speech = "Clods live together with these Pokémon, lending their little strength to one another to live and prosper."; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 6: 
 
\t \t \t \t \t 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.)"; 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 7: 
 
\t \t \t \t \t speechBox.onclick = function(){} 
 
        speechBox.style.cursor = 'default'; 
 
\t \t \t \t \t speechBox.innerHTML = '<p id="male" class="pointer">Boy</p> \ 
 
\t \t \t \t \t \t \t \t \t  <p id="female" class="pointer">Girl</p>' 
 
              document.getElementById("male").onclick = function(){gender = "boy"; professorOpen(); return;} 
 
              document.getElementById("female").onclick = function(){gender = "girl"; professorOpen(); return;} 
 
\t \t \t \t \t break; 
 
\t \t \t \t case 8: 
 
\t \t \t \t \t speechBox.innerHTML = "<p id='gender-confirm'>So, you're a " + gender + "?</p> \ 
 
\t \t \t \t \t \t \t <span id='yes-gender-p' class='pointer'>Yep!</span> \ 
 
          <br> \ 
 
\t \t \t \t \t \t \t <span id='no-gender-p' class='pointer'>No, obviously.</span>"; 
 
\t \t \t \t \t \t \t \t document.getElementById("yes-gender-p").onclick = function(){professorOpen(); return;} 
 
\t \t \t \t \t \t \t \t document.getElementById("no-gender-p").onclick = function(){speechNum = 6; professorOpen(); return;} 
 
        break; 
 
       case 9: 
 
        speechBox.onclick = function(){professorOpen();} 
 
        speechBox.innerHTML = ""; 
 
        speechBox.appendChild(speechP); 
 
        speechBox.style.cursor = 'pointer'; 
 
        speech = "Also, what is your name?"; 
 
        break; 
 
       case 10: 
 
        speechBox.onclick = function(){}; 
 
        speechBox.innerHTML = '<label for="name" id="name-lbl">Name</label> \ 
 
         <input type="text" id="name" placeholder="Name"> \ 
 
         <input type="submit" id="name-submit" class="pointer" value="Submit">'; 
 
          document.getElementById("name-submit").onclick = function(){name=document.getElementById('name').value; professorOpen(); return;} 
 
        break; 
 
       case 11: 
 
        speechBox.innerHTML = "<p id='name-confirm'>So, you're name is " + name + "?</p> \ 
 
         <span id='yes-name-p' class='pointer'>Yep!</span> \ 
 
         <br> \ 
 
\t \t \t \t \t <span id='no-name-p' class='pointer'>No, obviously.</span>"; 
 
          document.getElementById("yes-name-p").onclick = function(){professorOpen(); return;} 
 
\t \t \t \t \t \t \t document.getElementById("no-name-p").onclick = function(){speechNum = 9; professorOpen(); return;} 
 
        break; 
 
       case 12: 
 
        speechBox.onclick = function(){professorOpen();} 
 
        speechBox.innerHTML = ""; 
 
        speechBox.appendChild(speechP); 
 
        speechBox.style.cursor = 'pointer'; 
 
        speech = name + ' Tr&eacute;s bien!<br>What a fantastic name!'; 
 
        break; 
 
       case 13: 
 
        speech = name + '! Your adventure begins now!<br>You are about to scale the beautiful Malachite mountain!'; 
 
        break; 
 
       case 14: 
 
        speech = 'Go and meet many Pok&eacute;mon, and fill your life with rich experiences!'; 
 
        break; 
 
       case 15: 
 
        speech = "Now let's go visit the world of Pok&eacute;mon!"; 
 
        break; 
 
       case 16: 
 
        speech = 'But before you go, remember that on this island. You cannot catch new Pok&eacute;mon unless you already have room in your party! Good luck!'; 
 
        speechBox.onclick = function(){enterIsland();} 
 
\t \t \t \t speechP.innerHTML = speech; 
 
      } 
 
\t \t } \t \t \t \t \t \t \t \t \t \t \t //professOpen Func End 
 
} \t \t \t \t \t \t \t \t \t \t \t \t \t //preProfessOpen Func End 
 
function inputSaveCode(){ 
 
    
 
} 
 

 
function inputCheatCode(){ 
 
    
 
} 
 

 
function enterIsland(){ 
 
    
 
}

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

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

 
#main-menu-box{ 
 
\t width:200px; 
 
\t margin:0 auto; 
 
\t border:1px solid #444; border-radius:4px; 
 
\t position:relative; top:300px; 
 
\t cursor:pointer; 
 
} 
 
.main-menu-box-p{ 
 
\t border-radius:4px; 
 
\t background-color:#EEE; 
 
\t border:1px solid #666; 
 
\t padding-left:20px; padding-top:3px; 
 
\t margin:0; margin-bottom:1px; 
 
} 
 

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

 
.pointer{cursor:pointer;} 
 
#male{color:#00F; margin-bottom:0;} 
 
#female{color:#F06; margin-top:10px;} 
 
#gender-confirm{ 
 
    margin-bottom:5px; 
 
} 
 
#yes-gender-p{ 
 
    color:green; 
 
    margin-top:0; 
 
} 
 
#no-gender-p{ 
 
    color:red; 
 
} 
 
#name-confirm{ 
 
    margin-bottom:5px; 
 
} 
 
#yes-name-p{ 
 
    color:green; 
 
    margin-top:0; 
 
} 
 
#no-name-p{ 
 
    color:red; 
 
} 
 

 
#red-on-boat{ 
 
    width:10px; height:20px; 
 
}

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

 
<body> 
 
\t <div id="game-container"> 
 
\t \t <button id="start-button" onclick="mainMenu()">Start</button> 
 
\t </div> 
 
    <p id="warning">Warning: Game cannot be played without Javascript enabled and a browser that supports <span title="Safari 6, Chrome, IE8+, Firefox, Opera 12">HTML5</span>.</p> 
 
\t <script src="index/src/src.js"></script> 
 
</body> 
 
</html>

Answer 1

这是因为在选择1-6你没有做，除了分配一些文本变量speech什么。从选项7开始，您还将更改speechBox.innerHTML的值。

Answer 2

您正在给可变语音分配文本，但没有对它做任何事情。

https://jsfiddle.net/7xzfhm5v/2/

switch (speechNum) { 
     case 1: 
     speechP.innerHTML = "I am Yellow Diamond – reduced to introducing Pokémon Spin-Offs."; 
     break; 
     case 2: 
     speechP.innerHTML = "This world of clods is widely inhabited by creatures known as Pokémon."; 
     break;