switch语句有时只能起作用

时间:2016-02-28 04:37:51

标签: javascript switch-statement

Switch最初无法正常工作,但只需点击几下,就会出现案例7。我使用警报来确保speechNum ++工作,并且确实如此。我还使用带有===的if语句来确保speechNum保持为数字,并且它也是这样做的。这是在我添加了保存和作弊功能后开始的(虽然我没有看到如何)。只有Javascript可能会有问题。我有一个理论,我错放了一个},但是,如果是这样,我找不到它。我知道图像没有出现,但没关系。提前谢谢!

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

var gender;
var name = "";

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 mainMenu() {
  	gameContainer.removeChild(document.getElementById("start-button"));						//button disappears
    document.body.removeChild(document.getElementById('warning'));                          //warning disappears
	var mainMenuBox = document.createElement("DIV");
		mainMenuBox.id = "main-menu-box";
	var mainMenuBoxNew = document.createElement("P");
		mainMenuBoxNew.className = "main-menu-box-p";
		mainMenuBoxNew.innerHTML = "New Game";
			var mainMenuBoxNewPic = document.createElement("IMG");
				mainMenuBoxNewPic.className = "main-menu-box-pic";
				mainMenuBoxNewPic.src = "index/src/img/menu/red.gif"
				mainMenuBoxNew.appendChild(mainMenuBoxNewPic);
		mainMenuBoxNew.onmouseenter = function(){mainMenuBoxNewPic.src = "index/src/img/menu/redAnimated.gif";}
		mainMenuBoxNew.onmouseleave = function(){mainMenuBoxNewPic.src = "index/src/img/menu/red.gif";}
		mainMenuBoxNew.onclick = function(){gameContainer.removeChild(mainMenuBox);
            preProfessorOpen();
            return;
        }
	var mainMenuBoxSave = document.createElement("P");
		mainMenuBoxSave.className = "main-menu-box-p";
		mainMenuBoxSave.innerHTML = "Save Code";
			var mainMenuBoxSavePic = document.createElement("IMG");
				mainMenuBoxSavePic.className = "main-menu-box-pic";
				mainMenuBoxSavePic.src = "index/src/img/menu/binary.jpg";
				mainMenuBoxSave.appendChild(mainMenuBoxSavePic);
		mainMenuBoxSave.onmouseenter = function(){mainMenuBoxSavePic.src = "index/src/img/menu/binaryAnimated.gif";}
		mainMenuBoxSave.onmouseleave = function(){mainMenuBoxSavePic.src = "index/src/img/menu/binary.jpg";}
        mainMenuBoxSave.onclick = function(){gameContainer.removeChild(mainMenuBox);
            inputSaveCode();
            return;
        }
	var mainMenuBoxCheat = document.createElement("P");
		mainMenuBoxCheat.className = "main-menu-box-p";
		mainMenuBoxCheat.innerHTML = "Cheat Code";
			var mainMenuBoxCheatPic = document.createElement("IMG");
				mainMenuBoxCheatPic.className = "main-menu-box-pic";
				mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCode.jpg";
				mainMenuBoxCheat.appendChild(mainMenuBoxCheatPic);
		mainMenuBoxCheat.onmouseenter = function(){mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCodeAnimated.gif";}
		mainMenuBoxCheat.onmouseleave = function(){mainMenuBoxCheatPic.src = "index/src/img/menu/cheatCode.jpg";}
        mainMenuBoxCheat.onclick = function(){gameContainer.removeChild(mainMenuBox);
            inputCheatCode();
            return;
        }
	gameContainer.appendChild(mainMenuBox);
	mainMenuBox.appendChild(mainMenuBoxNew);
	mainMenuBox.appendChild(mainMenuBoxSave);
	mainMenuBox.appendChild(mainMenuBoxCheat);
}

function preProfessorOpen() {
	document.body.style.backgroundImage = "url(index/src/img/yellowDiamond/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 = function(){}
                    speechBox.style.cursor = 'default';
					speechBox.innerHTML = '<p id="male" class="pointer">Boy</p> \
									       <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;}
					break;
				case 8:
					speechBox.innerHTML = "<p id='gender-confirm'>So, you're a " + gender + "?</p> \
							<span id='yes-gender-p' class='pointer'>Yep!</span> \
                            <br> \
							<span id='no-gender-p' class='pointer'>No, obviously.</span>";
								document.getElementById("yes-gender-p").onclick = function(){professorOpen(); return;}
								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> \
					   <span id='no-name-p' class='pointer'>No, obviously.</span>";
                            document.getElementById("yes-name-p").onclick = function(){professorOpen(); return;}
							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();}
				speechP.innerHTML = speech;
            }
		}											//professOpen Func End
}													//preProfessOpen Func End
function inputSaveCode(){
    
}

function inputCheatCode(){
    
}

function enterIsland(){
    
}
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;
}
#warning{
    color:white;
    margin:0;
    text-align:center;
}

#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;
}

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

#speech-box{
	width:60%; height:100px;
	background-color:white;
	color:black;
	font-size:125%;
	border:1px solid #999; 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;
}
.main-menu-box-pic{
	width:20px; height:20px;
	float:right;
	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>
	<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="mainMenu()">Start</button>
	</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>
	<script src="index/src/src.js"></script>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

那是因为在选项1-6中你没有做任何事情,除了将一些文本分配给变量speech。从选项7开始,您还可以更改speechBox.innerHTML的值。

答案 1 :(得分:0)

您正在为变量语音分配文本但不对其执行任何操作。

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

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