Keyboard Arrow Key Controls in Javascript

Question

 function control()
            {
                var ship = document.getElementById("ship");
                document.onkeydown = function(e) { 
                    switch (e.keyCode) { 
                        case 38: 
                            ship.style.top += "5%"; 
                            break;
                        case 40: 
                            ship.style.top -= "5%"; 
                            break;
                        default:
                            break;
                    } 
                }
            }
setInterval(control,1000);

This code is not working.

The object I'm trying to move is not moving when I'm pressing the Up & Down Arrow Key.

Your code detects the keys pressed! Look the problem is here ship.style.top += "5%";. — s.kuznetsov, Nov 27 '20 at 11:25
Does this answer your question? [how to move a div with arrow keys](https://stackoverflow.com/questions/4950575/how-to-move-a-div-with-arrow-keys) — Sudhir Ojha, Nov 27 '20 at 11:32

score 1 · Answer 1 · answered Nov 27 '20 at 11:23

1

You can't do

ship.style.top += "5%";

because ship.style.top value is not a number but a string. the += opérator is concatening strings here.

answered Nov 27 '20 at 11:23

Florent

436
3
8

score 0 · Accepted Answer · edited Nov 27 '20 at 12:09

0

You should do something like that:

const ship = document.getElementById("ship");
document.onkeydown = function (e) {
    let winHeigth = window.innerHeight;
    let top = ship.style.top;
    switch (e.code) {
        case "ArrowUp":
            ship.style.top = (Number(top.substring(0, top.length - 2)) - (winHeigth / 20)) + "px";
            break;
        case "ArrowDown":
            ship.style.top = (Number(top.substring(0, top.length - 2)) + (winHeigth / 20)) + "px";
            break;
        default:
            break;
    }
}

The position attribute of the "ship" must be like "relative". By the way, e.keyCode is deprecated, you can use e.code instead ^^

edited Nov 27 '20 at 12:09

Akif

7,098
7
27
53

answered Nov 27 '20 at 12:00

Maxi_Mega

16
1
4

Will it work with % ? As I want my page to work with the similar dimensions on a mobile device too. – Nikunj Vashishtha Nov 27 '20 at 13:40
Yes, you can also do this: ship.style.top = (Number(top.substring(0, top.length - 1)) - 5) + "%"; – Maxi_Mega Nov 27 '20 at 13:47
Well this code is generating an Error Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.document.onkeydown (game.html:167) – Nikunj Vashishtha Nov 27 '20 at 13:51
Error In this line `let top = ship.style.top;` – Nikunj Vashishtha Nov 27 '20 at 13:54
Did you defined ship ? – Maxi_Mega Nov 27 '20 at 14:07
Yes I've done it in My previous function in which the ship is constantly moving `var ship = document.getElementById("ship"); var pos = 0; var id = setInterval(frame, 0.5); function frame() { pos+=0.1; ship.style.left = pos + "%"; if (pos > 85) { pos = 0; } } ` – Nikunj Vashishtha Nov 27 '20 at 14:22
So, I've remove your first line of the code. My old function is still working fine but key pressing generates an error to the function (e). – Nikunj Vashishtha Nov 27 '20 at 14:24
Yes, if you removed the ship definition, it's normal that it doesn't work as well ... Maybe you have a scope misunderstanding – Maxi_Mega Nov 27 '20 at 14:27
After removing your line , it is not generating error but ignoring the function. – Nikunj Vashishtha Nov 27 '20 at 14:29
Here is the script. [link](https://www.writeurl.com/text/clydp04b7oenagsskczf/fedpx9cq3wu31wpnrwoz/vidoxwtw5h8arwitjh50) – Nikunj Vashishtha Nov 27 '20 at 14:30
Your code works, the only "issue" is that we can only move the ship one step upper and one step lower... EDIT: replace the "%" by "px" and this issue disappears – Maxi_Mega Nov 27 '20 at 14:35
Yes !! Finally ! – Maxi_Mega Nov 27 '20 at 15:16

Keyboard Arrow Key Controls in Javascript

2 Answers2