Question

我试图生成一个用于我的游戏的表单，我不得不说，JavaScript是我以前所使用的全新世界，并且无法创建文本字段画布内部非常蹩脚，（至少我还没有找到适合移动设备的方法）

这是我的代码：

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位于＆＃34; js / CanvasManager.js＆＃34;脚本。

Answer 1

由于您的JavaScript代码位于script部分中通过head元素引用的外部文件中，因此当浏览器仍在处理head部分时，代码会被执行甚至还没有开始阅读body元素。因此，DOM中没有body元素，因此追加失败。在浏览器控制台日志中，您应该看到如下错误消息：

TypeError：document.getElementsByTagName（...）[0]未定义

有几种方法可以解决这个问题。一种方法是移动元素

<script src="js/CanvasManager.js"></script>

位于正文末尾，位于结束标记</body>之前。

更简洁的方法是将代码包装在一个函数中并指定它在页面加载后执行：

window.onload = function() {
  // your current code goes here
};

这样，逻辑将不依赖于script元素的位置。

在javascript中生成表单的问题[HTML5]

1 个答案: