2016-02-07 4 views
0

Я использовал учебник YouTube для этого. Я не понимаю, почему это не работает. По какой-то причине ничего не происходит, когда я нажимаю A или D.Невозможно выполнить перемещение объекта. Javascript

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    #container{ 
    position: relative; 
    height: 600px; 
    width: 400px; 
    outline: 2px solid black; 
    } 
    #character{ 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    outline: 2px solid black; 
    background-color: #FF6600; 
    left: 0; 
    } 
</style> 
<body onkeydown="anim"> 
<div id="container"> 
    <div id="character"></div> 
</div> 
<script> 
    var container = document.getElemnetById('container'); 
    var character = document.getElemnetById('character'); 
    var characterLeft = 0; 
    function anim(e){ 
     if (e.keyCode == 97){ 
      characterLeft += 2; 
      character.style.left = characterLeft + 'px'; 
     } 
     if (e.keyCode == 100){ 
      characterLeft -= 2; 
      character.style.left = characterLeft + 'px'; 
     } 
    } 
</script> 
</body> 
</head> 
</html> 

`

+2

У вас есть опечатка, должно быть 'document.getElementById ("")' вместо 'document.getElemnetById ("")' – Arjun

+0

О, спасибо. Тем не менее, не работает :( –

ответ

0

использовать этот

<div id="pop" onclick="anim();"> 
<span>click me</span> 
<div id="container"> 
    <div id="character"> 
    </div> 
</div> 
<script> 
    var container = document.getElemnetById('container'); 
    var character = document.getElemnetById('character'); 
    var characterLeft = 0; 
    function anim() 
    { 
     alert('yes it work!!'); 

     if (e.keyCode == 97){ 
      characterLeft += 2; 
      character.style.left = characterLeft + 'px'; 
     } 
     if (e.keyCode == 100){ 
      characterLeft -= 2; 
      character.style.left = characterLeft + 'px'; 
     } 
    } 

</script> 
</div> 
+0

Зачем это работает, а также код OP. Кроме того, требуется нажать клавишу, а не щелкнуть. – Teemu

0

Это работает. Я также поменял ключевые эффекты - нажатие «a» перемещает окно влево, а нажатие «d» перемещает его вправо. Надеюсь это поможет. Гав

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <style> 
     #container 
     { 
      position: relative; 
      height: 600px; 
      width: 400px; 
      outline: 2px solid black; 
     } 

     #character 
     { 
      position: absolute; 
      height: 50px; 
      width: 50px; 
      outline: 2px solid black; 
      background-color: #FF6600; 
      left: 0; 
     } 
    </style> 
    <body> 
     <div id="container"> 
      <div id="character"></div> 
     </div> 

    <script> 
     var container = document.getElementById('container'); 
     var character = document.getElementById('character'); 
     var characterLeft = 0; 

     document.onkeypress = function (e) { 
     e = e || window.event; 
     var charCode = e.charCode || e.keyCode; 
      if (charCode == 97){ 
       characterLeft -= 2; 
       character.style.left = characterLeft + 'px'; 
      }; 
      if (charCode == 100){ 
       characterLeft += 2; 
       character.style.left = characterLeft + 'px'; 
      } 
     } 
    </script> 
    </body> 
    </head> 
    </html> 
+0

Омг спасибо, ты лучший. Cheers! –

+0

не беспокоится. - вы можете выбрать другие ключи и их значения, а затем переместить ящик вверх и вниз, а также из стороны в сторону. – gavgrif