Problems generating a form in javascript [HTML5]

Question

I'm trying to generate a form for use with my game, I have to say, JavaScript is a whole new world from what I'm used to, and not being able to just create text-fields inside of the canvas is pretty lame, (Or atleast I haven't found a way to... that works with mobile devices)

Here's my code:

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);

Here's my 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>

When debugging the page I don't get any javascript errors, but the form never appears, and it also is not appended to the source. I also tried using $("body").append(loginForm); which is jQuery, but it also didn't work.

This is the generated 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>

The JavaScript is located inside of the "js/CanvasManager.js" script.

Answer 1

Since your JavaScript code is in an external file that is referred to via a script element in the head part, the code gets executed when the browser is still processing the head part and hasn't even started reading the body element. Thus, there is no body element in the DOM, so the append fails. In the browser console log, you should see an error message like the following:

TypeError: document.getElementsByTagName(...)[0] is undefined

There are several ways to fix this. One way is to move the element

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

at the end of the body, right before the end tag </body> .

A cleaner way is to wrap the code in a function and assign it to be executed once the page has loaded:

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

This way the logic won't depend on the placement of the script element.

Problems generating a form in javascript [HTML5]

Question

1 answers

solution1
1 ACCPTED 2014-12-11 16:56:56

Problems generating a form in javascript [HTML5]

Question

1 answers

solution1 1 ACCPTED 2014-12-11 16:56:56

solution1
1 ACCPTED 2014-12-11 16:56:56