如何从HTML表单获取数据并在HTML画布脚本中使用它 [英] How to get data from HTML form and use it in HTML canvas script
问题描述
我使用HTML画布做一个游戏，我把HTML页面上的几个输入框放在一个表单中，用户可以在其中输入关卡的密码，以便他可以继续下一个。但问题是，我不知道如何获得输入框的值，并让脚本进入级别，如果正确的密码被放置，如果不正确的什么都不做，什么都不在框中。 （脚本在外部JavaScript文件中）我尝试了一个正常的方式（ document.getElementById（...）。value 它根据需要），但显然它没有工作。
I'm doing a game using HTML canvas and I put on the HTML page several input boxes inside a form in which the user is to put the level's password so he can go on to the next one. But the problem is that I cannot figure out how to get the input box's value and have the script enter the level if the correct password is put and do nothing if it isn't correct of nothing is in the box. (the script is in an external JavaScript file) I tried the 'normal' way (the document.getElementById("...").value thing in a variable then manipulating it as needed) but obviously it didn't work.
下面是HTML页面的表单部分，以防它有帮助，但脚本中没有任何与它有关的东西。
Below is the form part of the HTML page in case it helps but there really isn't anything in the script that has to do with it.
<form id="passes">
Level 2 password: <input type="text" id="level2pass" /><br />
Level 3 password: <input type="text" id="level3pass" /><br />
Level 4 password: <input type="text" id="level4pass" /><br />
Level 5 password: <input type="text" id="level5pass" /><br />
Bonus level password: <input type="text" id="bonuslevelpass" />
</form>
如果没有任何合理的方法，可以有另一种方式将密码集成到游戏中这样的方式，我可以很容易（或不是那么容易：D）获取输入的值，并在画布中使用它
If there isn't any plausible way, could there be another way to integrate passwords into the game in such a way that I can easily (or not so easily :D) get the value of the input and use it in the canvas?
推荐答案
虽然很难猜测你的问题是什么，但是你的问题可能是 document.getElementById（...）。value 是由于运行您的JavaScript代码。
Although it is difficult to guess what your problem is, it could be that your problem with document.getElementById("...").value is due to running your javascript code before the page has been rendered.
检查这个jsfiddle 出来看看是否是你想要的。注意我已经使用选项没有换行< head> 来放置javascript代码，并确保该函数存在于全局范围。
Check this jsfiddle out to see if it is what you want. Notice I have used the option No wrap - in <head> to place the javascript code in and make sure the function exists in the global scope.
这篇关于如何从HTML表单获取数据并在HTML画布脚本中使用它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
