[SOLVED] Checking text typed in field?

[galvin]

I'm sure this is cake, but I am brand new to JavaScript...

 

I have a simple HTML table that is essentially a list of 20 "answers".  Each answer is in the format of...

 

<td>#1</td><td class='answer' id='answer0'></td>
<td>#2</td><td class='answer' id='answer1'></td>
etc, etc, through #20.

 

I have ONE text field above the list where a user can enter a guess at one of the 20 answers.  I need a javascript function that will check what the user entered into the text field and if it matches one of the 20 answers, that answer will display in its proper position in the table. For examples sake let's say answer #1 is "monkey" and #2 is "mother" (there would be 18 more, but only using two for examples sake).

 

 

As I said, there will be one text field to enter an answer in, using code like this...

            Enter answer:
                <input id="answer" type="text" size="30" onKeyUp="checkInput(this);" name="answer">

 

So at this point, I know I need a function called checkInput() that will compare what the user entered with one of the 20 answers.

 

Where I'm getting confused is this... First of all, what is the most efficient way to store the actual 20 answers (in an array OR should they be stored in the actual table data fields in their proper position, but be hidden??).

 

And once that is answered, can someone help me with what my function checkInput() would actually be?

 

The gist is that the list of 20 answers will be hidden until a user types one in. So if the user types "mothoo" in the box, that is NOT one of the 20 answers so nothing happens. If they then type "mother" in the box, that matches one of the 20 answers, so the answer "mother" will be revealed and show up in the table display in slot #2.  Then if they type "monkey" right after that, that matches an answer too, so "monkey" would then be revealed in slot #1.  And so on until they typed as many of the correct answers as they could.

 

Any help would be GREATLY appreciated.

 

Thanks,

Greg

[Axeia]

<script type='text/javascript'>
var answers = { 1:'monkey', 2:'mother' };
function checkInput( ele )
{
  if( ele.value )
  {
    for( var i = 0; i < answers.length; i++ )
    {
      if( answers[i] == ele.value )
      {
        document.getElementById( 'answer'+i ).innerHTML = answers[i];
      }
    }
  }
}
</script>

 

Shouldn't be using .innerHTML for text, but mweh it's textContent according to the w3c, and something else for IE.. innerHTML works in both.

[galvin]

thanks axeia!  Should do the trick. Just curious, do you know how I could make the text field (where the user enters their guess) clear out if what they entered DOES match one of the answers? 

In other words, in my first example, if someone typed "mother", then mother would should up in the table display and the text box where the user typed "mother" would clear out and be blank now (and ready for another guess).

[.josh]

also fyi there is no way to "hide" your answers with javascript.  It's there in the viewsource for all to see.  Even if you encrypt it, your js would have to decrypt it at some point in time and all of that would be there too.

[.josh]

thanks axeia!  Should do the trick. Just curious, do you know how I could make the text field (where the user enters their guess) clear out if what they entered DOES match one of the answers? 

In other words, in my first example, if someone typed "mother", then mother would should up in the table display and the text box where the user typed "mother" would clear out and be blank now (and ready for another guess).

 

document.getElementById('answer').value = "";

 

[galvin]

Thanks Crayon Violet.  Juts curious, if I stored the list of answers in an EXTERNAL javascript file, would that make the answers truly hidden?  or could someone still view the contents of my external .js files?

[.josh]

linking an external .js file would make it not show up in the main viewsource, but that would not stop someone from just going directly to the file.  You could go a step further and change the chmod on the .js file or move it out of a public directory to not be accessible by the user, but the code still needs to be sent to the browser in order to work.  All the user would have to do is use any number of a million addons out there to access it.  So the bottom line is no, there is no way to hide js from a user.

[.josh]

If you really want to hide the answers from the user, store it on the server in a file (chmoded or outside public directory) or database or inside server-side script and have your page make requests to the server to check the answer.  You can reload the whole page or use ajax to send requests/get a response without reloading the whole page.

[galvin]

great thank you!