Почему не работает javascript addEventListener?

Question

Я пытаюсь написать сценарий, который перемещает оранжевую рамку внутри синего квадрата с помощью клавиш со стрелками и Javascript eventlistener. Когда я запускаю страницу, ничего не происходит. Я пробовал курить в консоли, но это не дает мне никакого вывода. Я уверен, что мне не хватает чего-то маленького, но я не могу, чтобы жизнь меня поняла. Любые предложения были бы замечательными!

var orange = document.getElementById("orange"); 
 
orange.addEventListener("onkeydown", move, false); 
 
function move(e); 
 
    \t \t \t 
 
e = e || window.event; 
 
    
 
    if(e.keyCode == '38'){ //up 
 
    \t if(parseInt(orange.style.top) > '0'){ 
 
    \t \t orange.style.top = parseInt(orange.style.top) - 5; 
 
    \t } 
 
    } else if (e.keyCode == '40'){ //down 
 
    \t if(parseInt(orange.style.top) < '425'){ 
 
    \t \t orange.style.top = parseInt(orange.style.top) + 5; 
 
    \t } 
 
    } else if (e.keyCode == '37'){ //left 
 
    \t if(parseInt(orange.style.top) > '0'){ 
 
    \t \t orange.style.left = parseInt(orange.style.left) - 5; 
 
    \t } 
 
    } else if (e.keyCode == '39') { //right 
 
    \t if(parseInt(orange.style.left) < '425') { 
 
    \t \t orange.style.left = parseInt(orange.style.left) + 5; 
 
    \t }  
 
    } 
 
} 
 
    \t

#blue{ 
 
    background-color: blue; 
 
    position: relative; 
 
    height: 500px; 
 
    width: 500px 
 
} 
 
#orange{ 
 
    background-color: orange; 
 
    position: absolute; 
 
    width: 75px; 
 
    height: 75px; 
 
};

<div id="blue"> 
 
    <div id ="orange" style="left: 30px; top:30px;"></div> 
 
</div> 
 

Answer 1

У вас есть несколько проблем:

1) событие keydown не onkeydown (если вы не добавляете непосредственно к объекту (например, orange.onkeydown)

2) Верх измеряется в пикселях, а не только в целочисленном размере - вам нужно добавить + 'px' в свои верхние изменения: orange.style.top = parseInt(orange.style.top) + 5 + 'px'

Другие ноты:

• может работать лучше, чтобы иметь слушателя событий на окне, как это будет иметь фокус, ИДК, хотя - не проверять.
• e.keyCode это число, а не строка
• , как @bmceldowney упоминалось, у вас есть ошибка синтаксиса в вашем объявлении функции

Рабочая версия кода: https://jsfiddle.net/kkhkL065/

Answer 2

Вы должны получить сообщение о синтаксической ошибке в консоли, потому что вы не объявляете о move функции правильно.

function move(e); 

    e = e || window.event; 

должен выглядеть следующим образом:

function move(e) { 

     e = e || window.event; 

Answer 3

Как указано в this documentation page по Mozilla, Возможные цели keydown Событие (не onkeydown как ошибочно написано в вашем коде)

Сфокусированного элемент обработки ключа события, корневой элемент, если нет подходящего входного элемента не будет сфокусирован

Так в основном только входа (<input> и <textarea>) или корневых элементов (документ или окно) может обрабатывать событие.

Измените код следующим образом:

var orange = document.getElementById("orange"); 
var move = function(e){ 
    orange.classList.add("red"); 
} 
window.addEventListener("keydown", move, false); 

Вот ссылка на JSFiddle: https://jsfiddle.net/nbj0Lujw/

Надеется, что это помогает :)