Key Stoke not registering

[KeredDrahcir]

I've have two divisions and I have a question and if the answer is yes I want to hide the first division and show the second. If the answer is anything else I want to hide them both.

<div id="title" style="display: block; width: 900px; height: 475px; margin: 0 auto;">
  some content
</div>
<div id="instructions" style="display: none; width: 900px; height: 475px; margin: 0 auto;">
  other content
</div>
 

Since they answer can only be yes or no, I'm using an onkeydown function to sort out the display options.

<input type="text" name="instruction" id="instruction" onkeydown="toggle_visibility()" style="width: 20px; border: 0; font-size: 14pt;"/>
 

 
    <script type="text/javascript">
    <!--
        function toggle_visibility() {
           var a = document.getElementById('title');
           var b = document.getElementById('instructions');
           if (document.story.instruction.value == "y")
           {
             a.style.display = 'none';
             b.style.display = 'block';
           }
           else
           {
                a.style.display = 'none';
             b.style.display = 'none';
           }
        }
    //-->
    </script>

When I run it, all that happens is the both divisions are hidden whatever I type. If I hide the code in the else then press 'y' nothing happens but if I then delete it, it show the correct division. Am I missing something here?

[Rabbit]

Because the key has just been pressed, the value of the textbox has not yet been updated with the newly pressed key. Instead you need to check the event object to see what key was just pressed.

Also, I don't see the point of the first div, it will never ever be displayed so why have it at all?

[KeredDrahcir]

The first div displays when you load the page. The keystroke is there to switch the divs over.

[Rabbit]

Ok, my solution still applies.