为什么我在If语句中设置的变量不能在javascript中的if语句之外工作？

时间：2015-03-15 09:13:50

标签： javascript if-statement

我有这个if语句如下所示，我不能使用if语句之外的变量字母。任何想法都错了吗？

window.addEventListener('keydown', function(event) {
        if(event.keyCode == 65) {
            context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);  
            letter = "a";
            context.font = '50pt Calibri';
            context.textAlign = 'center';
            context.fillStyle = 'white';
            context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
            alert(letter + " was pressed");
});

 document.addEventListener('keydown', function(event) {                     
            if(event.keyCode == 13) {                                              
                alert(letter + " and enter was pressed");
            }
        });

编辑：

这是我的完整代码，但仍无效。还有更多想法吗？

/* Hangman Game CSS File */
body
{
	background-color: #9b59b6;
}

#main {
	background-color: #3498db;
	height: 97vh; 
   	width: 95vw;
   	vertical-align: middle;

}
canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Hangman by Lachlan Teale</title>	
		<meta name="description" content="Lachlan Teale's Hangman Game 2015">
		<meta name="keywords" content="hangman, lachlan, teale, Javascript">
		<meta charset="UTF-8">
		<meta name="author" content="Lachlan Teale">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<canvas id="main" width="1920" height="1080" style="border:1px solid #d3d3d3;"></canvas>

	<script type="text/javascript">

	//setting variables
		var canvas = document.getElementById('main');
     	var context = canvas.getContext('2d');
      	var underscore = "";
      	var letter;
      	var complete = false;

	//list of words
		var wordList = ["apple", "peach", "pear", "mango", "banana", "paper", "pens", "laptop", "desk", "chair", "star", "sky", "moon", "sun", "planets"];

	//picking a random word from the list
		var word = wordList[Math.floor(Math.random() * wordList.length)];

	//print out the underscores for the number of letters
		for (i = 0; i < word.length; i++)	{
			var underscore = underscore + "_ ";
		}

		context.font = '50pt Calibri';
      	context.textAlign = 'center';
      	context.fillStyle = 'white';
      	context.fillText(underscore, canvas.width * 0.5, canvas.height * 0.70);

    //correct letter text
      	context.font = 'bold 30pt Calibri';
      	context.textAlign = 'center';
      	context.fillStyle = 'white';
      	context.text
      	context.fillText("Correct Letters", canvas.width * 0.08, canvas.height * 0.05);

    //Wrong Letter text
      	context.font = 'bold 30pt Calibri';
      	context.textAlign = 'center';
      	context.fillStyle = 'white';
      	context.text
      	context.fillText("Wrong Letters", canvas.width - (canvas.width * 0.08), canvas.height * 0.05);


//while (complete = false) {

	//checking which button is pressed
		window.addEventListener('keydown', function(event) {
    		if(event.keyCode == 65) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);  
        		letter = "a";
        		context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
      			alert(letter + " was pressed");

   			}
    		else if(event.keyCode == 66) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);  
       			var letter = "b";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 67) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "c";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 68) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "d";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 69) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "e";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 70) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "f";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 71) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "g";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 72) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "h";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 73) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "i";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 74) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "j";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 75) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "k";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 76) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "l";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 77) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "m";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 78) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "n";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 79) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "o";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 80) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "p";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 81) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "q";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 82) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "r";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 83) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "s";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 84) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "t";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 85) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "u";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 86) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "v";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 87) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "w";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 88) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "x";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
    		}
    		else if(event.keyCode == 89) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "y";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
			}
    		else if(event.keyCode == 90) {
    			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       			var letter = "z";
       			context.font = '50pt Calibri';
      			context.textAlign = 'center';
      			context.fillStyle = 'white';
      			context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
       		}
       		else if(event.keyCode == 8) {
       			context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);
       		}
		});


      	document.addEventListener('keydown', function(event) {                     // Wont print out the Letter Variable set in the statements
    		if(event.keyCode == 13) {											   // Set in the if  statements above.
    			alert(letter + " and enter was pressed");
    		}
    	});
		
		</script>
	</body>
</html>

2 个答案:

答案 0 :(得分：2)

实际上，我已经运行了您的代码，如果您按下＆＃39;并输入，它可以工作，但是如果你只是按＆＃39;输入＆＃39;，你就会收到一个错误＆＃39;字母没有定义＆＃39;。

请参阅this jsfiddle

这就是原因：

如果您在javascript中编写此代码：

letter = 'a';

并且范围内没有变量letter，它会创建一个新变量window.letter。

您的文档事件监听器现在可以引用window.letter。

如果您没有按a，文档事件监听器将运行此代码

    alert(letter + " and enter was pressed");

并尝试读取名为letter的变量，并抛出错误letter is not defined。

您需要做的是自己创建一个全局letter变量。在定义任一监听器之前，只需添加行

即可 
var letter;

这将在代码块的范围内创建一个变量，并为其赋值undefined。

现在，如果您在按下＆＃39; a＆＃39;之前按回车键，您将获得

undefined and enter was pressed

可能不完全是你想要的，但至少你可以理解发生了什么： - ）

稍后编辑（提供完整代码后）

请参阅此代码：

window.addEventListener('keydown', function(event) {
        if(event.keyCode == 65) {
            letter = 'a';
        }
        else if (event.keyCode == 66) {
            var letter = 'b';
        } 
        else if (event.keyCode == 67) {
            var letter = 'c';
        }

现在，您的事件处理函数中至少有一个实例，您声明letter变量前面有关键字var。 这将创建一个仅在该函数中可见的变量letter。在这个函数之外可能有一个letter变量，但是在函数内部，这将被忽略，而不是函数范围的变量。

您必须删除功能块中出现的var变量名称前面的letter关键字。然后它将找到并使用在功能块之外声明的letter变量。

答案 1 :(得分：0)

letter不是if声明;它的功能完全不同。

了解变量范围，这一切都有意义。

相关问题
最新问题