我的Javascript代码没有检测到输入
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的Javascript代码没有检测到输入相关的知识，希望对你有一定的参考价值。
我一直在尝试获取输入来处理我的javascript代码，无论如何都不会检测输入！我一直在检查它，它不起作用！
<!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>我一直在使用一些教程，我只想要输入检测。
答案
变量keystate和Up_Key是在create函数中定义的，但是你试图在另一个名为update的函数中使用它们。他们将在那里成为undefined，因为它在另一个范围内。
如果在函数之外声明这些变量，则代码将正常工作。
最好将所有代码封装在IIFE（立即调用的函数表达式）中，因此不要使用全局变量来规范全局范围。谷歌说：
一个立即调用的函数表达式（或IIFE，发音为“iffy”）是一种JavaScript设计模式，它使用JavaScript的函数作用域生成一个词法范围。
这是您的代码更新和工作：
<!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>以上是关于我的Javascript代码没有检测到输入的主要内容，如果未能解决你的问题，请参考以下文章
如何使用模块化代码片段中的LeakCanary检测内存泄漏？