How to get data from HTML form and use it in HTML

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.

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>

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?

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.

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.