How can I use JavaScript/HTML/CSS to load a new page when a key is pressed down?

Question

What would be the code for moving onto a new screen after a user presses a key. For example I have coded a blank screen that says press any key to begin.

I have been looking all over the web, but I am unable to find such a code that does not involve jQuery etc.

Thank you in advance.

<script>
    //created a variable for instructions
       var instructions = '<h1><center>You will see three different symbols appear</center></h1>';

    //Created a button
       var button = document.createElement('button');
        button.innerHTML = 'Click here to Start';

       var body = document.getElementsByTagName('body')[0];
        body.appendChild(button);
        button.addEventListener('click', function(){
        if('click'){
            document.open(newPage)
        }
        });

    //Pressing a key (space bar in this case) will open up a blank page with the instructions of the experiment 
    document.addEventListener('keydown',function(e){
    if(e.keyCode==32){ 
        document.location.href=('about:blank');
        document.write(instructions)
}
});

</script>

What have you tried? This is a pretty straightfoward thing to do. Hint: eventlisteners are your friend. — basic, Jun 03 '19 at 20:00
[How do I redirect to another webpage?](https://stackoverflow.com/q/503093/215552) — Heretic Monkey, Jun 03 '19 at 20:01

score 0 · Answer 1 · answered Jun 03 '19 at 20:02

0

Try

document.onkeydown= e => location='https://example.com'

Click here and push some key

answered Jun 03 '19 at 20:02

Kamil Kiełczewski

85,173
29
368
345

1

`addEventListener` is the preferred method for adding event listeners to DOM objects. – Heretic Monkey Jun 03 '19 at 20:10

score 0 · Accepted Answer · answered Jun 03 '19 at 20:12

0

it's better to use EventListener

document.addEventListener('keydown',function(e){
    if(e.keyCode==65)//key code for 'a'
        location="http://google.com"
})

for a list of key codes: http://gcctech.org/csc/javascript/javascript_keycodes.htm

answered Jun 03 '19 at 20:12

Noam

333
1
18

so instead of opening a URL webpage how would I be able to open a blank white screen? – r1111 Jun 03 '19 at 20:46
I'm not sure what you mean. do you mean openning a blank page in a new window, navigating to a blank page, or erasing all the content in the current page? note that if you navigate to a blank page you won't have control on that page because it's a different website. – Noam Jun 04 '19 at 09:00
This is what I am trying to do: A page opens with a message that says press any key to begin. Then a new page not a window opens with a set of instructions. After the instructions have been read a button can be clicked to move on to a new page to begin a trial version of an experiment. So far I have been able to make the 2nd page and the button. However the button appears on the first page and I cannot seem to open up a third page. Below I have pasted what I have written out so far – r1111 Jun 04 '19 at 15:13
var instructions = '
You will see three different symbols appear
'; var button = document.createElement('button'); button.innerHTML = 'Click here to Start'; var body = document.getElementsByTagName('body')[0]; body.appendChild(button); button.addEventListener('click', function(){ if('click'){document.open(newPage) } }); document.addEventListener('keydown',function(e){ if(e.keyCode==32){ document.location.href=('about:blank'); document.write(instructions) }}); – r1111 Jun 04 '19 at 15:16
instead of changing the location to "about:blank", you can use document.open(), which just erases all the html content. this way your javascript code will continue running. – Noam Jun 04 '19 at 19:28
by the way, if you write press any key to begin, you better not check if it's [space].. it is suppose to be any key. – Noam Jun 04 '19 at 19:30

How can I use JavaScript/HTML/CSS to load a new page when a key is pressed down?

2 Answers2

You will see three different symbols appear