我正在尝试生成一个用于我的游戏的表单，我不得不说，JavaScript 与我所习惯的相比是一个全新的世界，并且无法仅在 Canvas 内创建文本字段非常蹩脚，(或者至少我还没有找到一种方法......适用于移动设备)
这是我的代码:
var loginForm;
var formUserInput;
var formSubmit;
loginForm = document.createElement("form");
loginForm.setAttribute('method', "post");
loginForm.setAttribute('action', 'doSomething()');
formUserInput = document.createElement("input");
formUserInput.setAttribute('type', "text");
formUserInput.setAttribute('name', "username");
formSubmit = document.createElement("input");
formSubmit.setAttribute('type', "submit");
formSubmit.value = "Submit";
loginForm.appendChild(formUserInput);
loginForm.appendChild(formSubmit);
document.getElementsByTagName('body')[0].appendChild(loginForm);
这是我的 HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Online RPG Alpha </title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script src="js/engine/networking.js"></script>
<script src="js/engine/phaser.min.js"></script>
<script src="js/entity/Player.js"></script>
<script src="js/CanvasManager.js"></script>
</head>
<body>
<div id="game"></div>
</body>
</html>
调试页面时，我没有收到任何 JavaScript 错误，但表单从未出现，并且也不会附加到源代码中。我还尝试使用 $("body").append(loginForm); 这是 jQuery，但它也不起作用。
这是生成的 HTML:
<html><head lang="en">
<meta charset="UTF-8">
<title>Online RPG Alpha </title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script src="js/engine/networking.js"></script>
<script src="js/engine/phaser.min.js"></script>
<script src="js/entity/Player.js"></script>
<script src="js/CanvasManager.js"></script>
</head>
<body>
<div id="game" style="overflow: hidden;"><canvas width="800" height="600" style="display: block; touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit;"></canvas></div>
</body></html>
JavaScript 位于“js/CanvasManager.js”脚本内部。
最佳答案
由于您的 JavaScript 代码位于通过 script 引用的外部文件中head 中的元素部分，当浏览器仍在处理 head 时，代码就会被执行。部分，甚至还没有开始阅读 body元素。因此，不存在body DOM 中的元素，因此追加失败。在浏览器控制台日志中，您应该看到如下错误消息:
TypeError: document.getElementsByTagName(...)[0] is undefined
有多种方法可以解决此问题。一种方法是移动元素
<script src="js/CanvasManager.js"></script>
位于正文末尾，结束标记之前 </body> .
更简洁的方法是将代码包装在函数中，并指定它在页面加载后执行:
window.onload = function() {
// your current code goes here
};
这样逻辑就不会依赖于 script 的位置元素。
关于javascript - 在 javascript 中生成表单时出现问题 [HTML5]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27420157/