Почему мой сценарий, который позволяет мне управлять своими элементами с помощью клавиш со стрелками, не работает?

Question

Вот мой код:

var  div=document.getElementById("myDiv")
div.style.backgroundColor="blue";
div.style.display="block";
document.onkeydown=function(r){
    switch(r.key){
        case "ArrowRight":
        div.style.position="left:"+100+"px"
    }
}

Я пытаюсь сделать так, чтобы при нажатии стрелки вправо позиция делителя была left:100px.

Единственная ошибканаходится в строке 7, где я сказал:

div.style.position="left:"+100+"px"

Когда я заменил эту строку командой оповещения, это сработало, поэтому я знаю, что проблема в том, как я пытался изменить положение.Как я могу исправить свой код?

Answer 1

Вместо div.style.position="left:"+100+"px", попробуйте:

div.style.position="absolute"; // or one of the other css position properties, depending what you want this to be relative to
div.style.left=100+"px";

Если вы хотите, чтобы div перемещался на 100 пикселей каждый раз, то вы можете сделать что-то вроде:

var  div=document.getElementById("myDiv")
div.style.backgroundColor="blue";
div.style.display="block";
div.style.position="absolute";
var x = 0;
document.onkeydown=function(r){
    switch(r.key){
        case "ArrowRight":
        x+=100;
        div.style.left=x+"px";
    }
}