在javascript中生成表单时出现问题[HTML5]

Question

我正在尝试生成一种供游戏使用的表单，我不得不说，JavaScript是我所习惯的一个全新的世界，不能仅在画布内部创建文本字段就很la脚了，（或者至少我还没有找到一种适用于移动设备的方法）

这是我的代码：

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”脚本的内部。

Answer 1

由于您的JavaScript代码位于外部文件中，该文件是通过head部分中的script元素引用的，因此当浏览器仍在处理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 个解决方案

解决方案1
1 已采纳 2014-12-11 16:56:56

在javascript中生成表单时出现问题[HTML5]

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-11 16:56:56

解决方案1
1 已采纳 2014-12-11 16:56:56