Question

我一直在尝试获取输入来处理我的javascript代码，无论如何都无法检测输入！我一直在检查它，它不起作用！

＆＃13;

<!Doctype HTML>
<html>

<head>
	<title>Input Test</title>
</head>

<body>

	<!--<button onClick="main()">Start Game</button>-->

	<p id = "test"> </p>
	
</body>

<script>

	main();
	function main() {	
		create();
	}
	
	function create() {
		
		var keystate;
		keystate = {};
		// keep track of keyboard presses
		document.addEventListener("keydown", function(evt) {
			keystate[evt.keyCode] = true;
		});
		document.addEventListener("keyup", function(evt) {
			delete keystate[evt.keyCode];
		});
		
		var Up_Key = 38;
		
		setInterval("update()", 100);
		
	}
	
	function update() {
		
		//document.getElementById("test").innerHTML = "twerks";
		
		if (keystate[Up_Key]) {
			document.getElementById("test").innerHTML = "works";
		}
		
	}

</script>

</html>

＆＃13;

我一直在使用一些教程，我只想要输入检测。

Answer 1

变量keystate和Up_Key是在create函数中定义的，但您尝试在另一个名为update的函数中使用它们。他们在那里undefined，因为它在另一个范围内。

如果您在函数之外声明这些变量，那么您的代码将正常工作。

最好将所有代码封装在IIFE（立即调用的函数表达式）中，这样就不会使用全局变量来规范全局范围。谷歌说：

一个立即调用的函数表达式（或IIFE，发音为＆＃34; iffy＆＃34;）是一种JavaScript设计模式，它使用JavaScript的函数范围产生一个词法范围。

以下是您的代码已更新并正常运行：

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <title>Input Test</title>
</head>

<body>
  <p id="test"></p>
</body>

<script>
  (function() {
    var keystate = {};
    var Up_Key = 38;

    main();

    function main() {
      create();
    }

    function create() {
      // keep track of keyboard presses
      document.addEventListener("keydown", function(evt) {
        keystate[evt.keyCode] = true;
      });
      document.addEventListener("keyup", function(evt) {
        delete keystate[evt.keyCode];
      });

      setInterval(update, 100);
    }

    function update() {
      if (keystate[Up_Key]) {
        document.getElementById("test").innerHTML = "works";
      }
    }
  })();
</script>

</html>

＆＃13;

我的Javascript代码没有检测输入

1 个答案: